CSS3 圆角矩形的使用

在 CSS3 中，可以用 border-radius 属性实现圆角矩形。最简单的例子如下：

 200px;
height: 100px;
border-radius: 20px;
border: 1px solid;

 

如果将 border-radius 的值设为一个正方形边长的一半，就得到一个圆形：

 160px;
height: 160px;
border-radius: 80px;
border: 1px solid;

 

实际上， 圆角矩形四个角的圆弧半径可以不一样，我们可以用 border-top-left-radius，border-top-right-radius，border-bottom-left-radius 和 border-bottom-right-radius 属性分别设置四个角的值。

另外，四个角也可以设置为椭圆弧形状，例如：

 200px;
height: 100px;
border-radius: 40px / 20px;
border: 1px solid;

 

这个 border-radius 属性只有 Firefox 4.0，Chrome 4.0，Safari 5.0，Opera 11.50 和 IE 9.0 开始的浏览器才支持。旧的 Firefox 支持 -moz-border-radius 属性，而旧的 Chrome 和 Safari 浏览器支持 -webkit-border-radius 属性。

参考资料：
[1] CSS Backgrounds and Borders Module Level 3
[2] border-radius - MDN
[3] CSS3 的圆角 Border-radius