CSS3之旅: border-radius(圆角)
Border-radius 允许你使用CSS创建圆角而不需要使用图片或者是JavaScript。如果你还没有使用这个的话，请看看这个教程。
对文档不感兴趣？直接看一下演示吧。
圆角
从历史上来说，圆角通过背景图片和JavaScript实现起来相当棘手 。交互设计师会经常感到无奈，网页设计师也会为此倍感纠结。这种问题将不再存在!
全部圆角
现在你可以很容易的使用CSS3来创建圆角。目前不同的浏览器之间还存在一些差异，但是我相信最终这个句法会标准化的。要添加圆角，你只需要这样:
1 2 3 4 5 6 | /* Gecko browsers */ -moz-border-radius: 5px; /* Webkit browsers */ -webkit-border-radius: 5px; /* W3C syntax - likely to be standard so use for future proofing */ border-radius:10px; |
这就是所有需要做的。Firefox之前在渲染圆角的时候确实有些问题，不过它现在已经修复了，所以你尽可以放心使用。
更多控制
你也可以控制某一个单独的角，将其应用为圆角。这次不同的浏览器之间的代码仍然有些许不同，所以你仍然需要分别列出。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | /* Gecko browsers */ -moz-border-radius-topleft: 20px; -moz-border-radius-topright: 0; -moz-border-radius-bottomleft: 0; -moz-border-radius-bottomright: 20px; /* Webkit browsers */ -webkit-border-top-left-radius: 20px; -webkit-border-top-right-radius: 0; -webkit-border-bottom-left-radius: 0; -webkit-border-bottom-right-radius: 20px; /* W3C syntax */ border-top-left-radius: 20px; border-top-right-radius: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 20px; |
验证!
的确 – 这些样式的确不能通过CSS 2.1的验证，因为它们不是CSS2.1中的条目。如果你非要验证的话，我建议你将这些样式写到一个独立的CSS3文件中。如果你不允许你的网站上出现任何未通过验证的样式，那么，你就先等一等吧。
浏览器支持
Border-radius 在Firefox 2、Firefox 3、 Safari、 Chrome和相关的Gecko和Webkit 内核的浏览器中均被支持.
所有的IE版本浏览器和Opera 尚不支持圆角，所以这些用户看到的将是直角。
Demo
PS:之前前端也有介绍一系列的CSS3教程，其中就有关于圆角的介绍，本系列从另一个角度来说明CSS3的圆角，相信你对此的理解会更加深刻。
原文:http://www.qianduan.net/?p=5648
译自:http://shapeshed.com
版权所有，转载请注明出处，谢谢。
您或许也会喜欢：
如果你喜欢本文，欢迎 订阅本站 以获得本站最新内容。
我说用Jquery写的这个怎么在IE中还不能用呢，谢谢了！
IE不支持CSS3的属性，不过jQuery有相关的插件可以模拟这种效果。