css 实现圆角边框

Border-radius 允许你使用CSS创建圆角而不需要使用图片或者是JavaScript。如果你还没有使用这个的话，请看看这个教程。

对文档不感兴趣？直接看一下演示吧。

圆角

从历史上来说，圆角通过背景图片和JavaScript实现起来相当棘手 。交互设计师会经常感到无奈，网页设计师也会为此倍感纠结。这种问题将不再存在!

全部圆角

现在你可以很容易的使用CSS3来创建圆角。目前不同的浏览器之间还存在一些差异，但是我相信最终这个句法会标准化的。要添加圆角，你只需要这样:

/* 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之前在渲染圆角的时候确实有些问题，不过它现在已经修复了，所以你尽可以放心使用。

更多控制

你也可以控制某一个单独的角，将其应用为圆角。这次不同的浏览器之间的代码仍然有些许不同，所以你仍然需要分别列出。

 

/* 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

你可以通过这里查看演示, 或者在Github上下载源文件

PS:之前前端也有介绍一系列的CSS3教程，其中就有关于圆角的介绍，本系列从另一个角度来说明CSS3的圆角，相信你对此的理解会更加深刻。
原文:http://www.qianduan.net/?p=5648
译自:http://shapeshed.com