css圆角 CSS圆角的7种解决方案 css圆角-CSS圆角的7种解决方案 2010-06-10 13:247 CSS圆角解决方案 有7种不同的方式来实现圆角框的效果。 核心关键词是“流畅、完美、兼容、可重用、语义化”。 这些技术都是目前互联网上最流行的方法。 纵观各种方法，各有各的优点，请针对不同的环境分别使用。 圆角镜框，因为其款式比直角镜框更加美观，成为了设计师们最喜爱的设计元素。 在当前的网页标准下，大量的网页和博客都采用圆角框架设计，成为一道亮丽的风景线。 然而正是这个圆角，却成为了网页后端人员心中永远抹不去的阴影。 可谓是痛并爱着。 我喜欢的是它的美丽，但伤害的是让它兼容各种不同的浏览器已经成为一个永恒的神话。 我们来回顾一下目前网上流行的解决方案有哪些。 1.无图片纯css圆角框包含原因：兼容性强，无图形图1特点：1.无图形，使用大量div容器来模拟圆角效果。 2.兼容性：杀掉所有浏览器。 缺点：1.构造这个圆角需要添加太多非语义标签，结构比较冗余。 2、复用性不强：如果一个页面有多个圆角，要实现不同的直径，则灵活性不够。
3、边框颜色看似可以调整，但是会对页面的结构产生致命的影响。 它适用于色调单一、页面中圆角较少的页面。 4、圆弧内渐变颜色的图形背景不易实现。 5、圆角边框不够平滑，有锯齿，适合背景颜色与当前颜色相差不大、弧度较小的网页。 实现原理：使用大量高度为1像素的div容器，并使用背景色和边框颜色来模拟圆角框的轮廓。 2.纯css圆角框架，无图片css3 圆角 锯齿，使用特殊字符（&bull） 收录原因：圆滑，无图形 图2 特点： 1.使用特殊字符（点）模拟圆角，无任何图形。 2.兼容性：杀掉所有浏览器。 3.圆角平滑缺点：1.构造这个圆角需要添加非语义标签，结构冗余，和第一个一样。 2、复用性不强：如果一个页面有多个圆角，要实现不同的直径，需要调整四个角图片的位置，而且文字的大小也有影响，所以灵活性不够。 3、虽然可以调整颜色，但是要求上面的底色和人物颜色一致，不能做成边框腰线。 适合单色调且一页内圆角不多的页面。 4、圆弧内渐变颜色的图形背景也不容易实现。 实现原理：使用特殊字符（&bull），利用定位截取四分之一圆，模拟圆角框的角图。 3.包含图片圆角框的原因：兼容性强，可以表达非常复杂的圆角效果。
图3的特点： 1.使用四个圆角图形（或圆形图片）。 2.兼容性：杀掉所有浏览器。 3.这是最常用的圆角方法。 4.因为是图片表示的，所以它的圆角超级光滑，没有任何锯齿状。 5、性能丰富，适用于各种对图像性能要求较高的圆角边框。 缺点： 1.构造这个圆角还需要添加四个标签来保存四个角图片，结构也比较冗余。 2、复用性不强：如果一个页面有多个圆角，要实现不同的直径，就必须重新创建一组圆角图片。 3、如果没有特殊的结构冗余要求，这是超光滑圆角框架的解决方案。 实现原理：利用九方格原理，在一个容器的四个角添加四个绝对定位（或相对定位）的圆角图片。 4、使用VML绘制圆角（即仅） 收录原因：无图片、平滑、阴影边框可添加。 四大特点： 1.无图形。 2.兼容性：只能在IE中使用。 3、圆角直径可随意调节。 4、复用性强：可以任意调用多个圆角。 5.圆角颜色可随意设置。 6、结构无冗余。 7. 圆角光滑，无锯齿边缘。 缺点： 1.除了兼容性问题外，其他方面性能都不错。 2、圆弧内无法显示丰富、渐变的图片，因为圆弧外框是透明的。 实现原理：使用IE特有的VML来绘制圆角。 v:roundrect bordercolor="red" strokeweight="2px" arcsize="0.08″ /v:roundrect 注意添加引用空间：html xmlns:v xmlns="" 这是兼容用法，xmlns:v 一定不能少， 否则。
在样式表中添加这句话： v":*{behavior:url(#default#VML);display:inline-block;} Arcsize 是直径 Strokeweight 是边框线的长度 Strokecolor 是边框线的颜色在 IE 系列浏览器中查看此示例） ~DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""html xmlns:v xmlns="head meta http-equiv="Content-Type"content=" text /html;charset=utf-8"/title VML 绘制平滑圆角框架/标题样式 v:*{behavior:url(#default#VML);display:inline-block;}body{background-color:# 99FFFF; font-size:12px;}.circle{高度:130px;宽度:300px;padding-top:8px;margin:0px auto;z-index:2;margin-left:340px;}h1{border-bottom: 2px 红色固体;字体大小：12px;边距：4px;文本缩进：1em;高度：20px;}div{字体大小：12px;填充：10px;}/style/head body v:roundrectclass =“圆”描边颜色= "red"Strokeweight="2px"arcsize="0.08"h1 VML绘制平滑圆角/h1 div使用IE专用VML绘制平滑圆角边框，还可以绘制阴影效果。
就其图形表现而言，是非常完美的。 /div v:shadow on="t"color="#777"opacity="52428f"offset="1.5pt,1.5pt"//v:roundrect/body/html 提示：运行前可以更改部分代码。 5、使用私有属性绘制圆角（仅限FF3） 收录原因：图形平滑无锯齿 五特点： 1、不使用图形。 2.兼容性：只能在FF3中使用，不支持其他浏览器。 3、圆角直径可随意调节。 4、复用性强：可以任意调用多个圆角，只需要设置样式表。 5.圆角颜色可随意设置。 6、结构无冗余。 7. 圆角光滑，无锯齿边缘。 缺点： 1.除了兼容性问题外，其他方面性能都不错。 这个方法应该是最完美的形式了。 不幸的是，目前只有 FF3 可以支持该属性。 CSS3将来会支持这个属性，但我不知道要等多少年。 2、与第五种圆角一样，在处理圆弧内的图片背景时就显得有些力不从心了。 实现原理：使用FF3特有的私有属性来绘制圆角。 只有两个属性可以用来突出平滑的圆角边框 -moz-border-radius: 10px; /* 圆角直径 */ 边框：5px 红色实心； /* 边框大小 */ 示例演示：（请使用FF3浏览器查看，其他浏览器不支持） ~DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 equalv="Content-Transitional//EN""html xmlns= "head meta http-Type"content="text/html; charset=utf-8 下的圆角框"/title FF3/title style type="text/css" body{background:#CCCCCC;}.round{-moz- border-radius:20px;/*半径*/border :4pxsolid#333;/*边框长度*/margin:50px auto;width:30%;height:150px;font-size:12px;}h1{border-bottom ：4px#333 固体；字体大小：12px； width:100%;padding:5px 0;text-indent:1em;}.context{font-size:12px;padding:10px;}/style/head body divh1 FF3 私有属性 绘制圆角框/h1 divp FF3 两个属性圆角框的问题可以解决： /p p-moz-border-radius: radius /p pborder: border /p/div/div/body/html 提示：运行前可以更改一些代码。
6、无图片脚本的圆角框架（js半完美解决方案） 这个解决方案应该是目前比较完美的解决方案。 图6的特点： 1.没有使用图形。 2.兼容性：秒杀所有浏览器 3.随意调整圆角直径 4.复用性强：随意调用多个圆角。 5.颜色可随意设置，可使用复杂的图片作为背景，表现力丰富。 6、结构无冗余。 您只需要在容器上定义一个类或 ID 即可对 div 进行四舍五入。 7.圆角光滑。 缺点： 1.客户端禁用JS时不会出现圆角，但就目前的情况来看，这种情况应该问题不大。 7.添加圆角框架与vml/canvas结合无图片的解决方案，将圆角框架与jquery/vml/canvas结合无图片。 图7的特点： 1.没有使用图形。 2.兼容性：秒杀所有浏览器 3.圆角直径可以随意调整css3 圆角 锯齿，四个角可以随意设置是否圆角。 4、复用性强：多个圆角可任意调用。 5.颜色可随意设置，可使用复杂的图片作为背景，表现力丰富。 6.结构上没有冗余，只需要在容器上定义一个类或ID即可。 7.圆角光滑。 缺点： 1.这个圆角需要用到jquery库和一个JS文件。 如果您已经在项目中使用了 Jquery 库，您仍然可以使用它。 不然为了一个圆角加载一两个JS文件就有点亏了。
2、圆角的显示在不同浏览器下有点问题。 示例演示： 包下载：下载demo 结论：目前的CSS无法为一个容器定义多个背景图片，导致出现这些圆角的效果。 添加冗余标签。 听说CSS3会引入这个属性，可能是圆角统一的时候。 也有说CSS3打算增加像FF3私有属性（-moz-border-radius）这样的方法，可以完美解决这个问题。 但目前的情况下，也许可以用以前的方法来进行过渡，我强烈期待CSS3的到来。 总结一下：在目前的情况下，基本上不可能实现绝对完美的圆角边框，因此被命名为“半完美方案”。
发表评论