CSS3的border-radius属性定义HTML元素的圆角

秦歌(YanKaven) 的站点：http://dancewithnet.com/

两年前发表的《The visual design of Web 2.0》中提到“Rounded everything”，圆角因使人感觉舒适的友好风格而变得无处不在。这个无处不在也让很多前端工程师累个半死，YAHOO Performance Research Engneer Team 的Nicole在讲演《Designing Fast Websites》中用的副标题是don’t blame the rounded corners!，从侧面也说明了圆角给实现者带来的困扰：实现麻烦、兼容困难、性能不佳。而W3C早在 2002年的CSS3草案 中就加入了一个叫 border-radius 的属性，通过它可以直接来定义HTML元素的圆角。

CSS3的border-radius规范

最新草案 中其主要信息如下：

1. 属性：
   border-top-right-radius
   border-bottom-right-radius
   border-bottom-right-radius
   border-bottom-right-radius
   值：<length> <length>?。它们分别是定义角形状的四分之一椭圆的两个半径。如图：
   
   1. 第一个值是水平半径。
   2. 如果第二个值省略，则它等于第一个值，这时这个角就是一个四分之一圆角。
   3. 如果任意一个值为0，则这个角是矩形，不会是圆的。
   4. 值不允许是负值。
2. 属性：border-radius。它是上面四个属性值的简写。
   值：<length>{1,4} [ / <length>{1,4} ]?
   1. 如果斜线前后的值都存在，那么斜线前的值设置水平半径，且斜线后的值设置垂直半径。如果没有斜线，则水平半径和垂直半径相等。
   2. 四个值是按照top-left、top-right、 bottom-right、 bottom-left的顺序来设置的。如果bottom-left省略，那么它等于top-right。如果bottom-right省略，那么它等于top-left。如果top-right省略，那么它等于top-left。
3. 应用范围：所有的元素，除了table的样式属性border-collapse是collapse时
4. 内边半径等于外边半径减去对应边的厚度。当这个结果是负值时，内边半径是0。所以内外边曲线的圆心并不一定是一致的。
5. border-radius也会导致该元素的背景也是圆的，即使border是none。如果background-clip是padding-box，则背景（background）会被曲线的内边裁剪。如果是border-box则被外边裁剪。border和padding定义的区域也一样会被曲线裁剪。
6. 所有的边框样式（solid、dotted、inset等）都遵照角的曲线。如果设置了border-image，则曲线以外的部分会被裁剪掉。
7. 如果角的两个相邻边有不同的宽度，那么这个角

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!