CSS3如何实现DIV圆角边框

CSS3如何实现圆角边框

在进行页面布局时，DIV边框默认是矩形边框，想让边框为圆角时，可以用CSS3的border-radius这一属性来实现。
例如：想让div盒子边框四个角都为半径为10px的圆角时具体代码如下：

效果图：

下面对border-radius具体细节进行介绍：
语法：border-radius: 1-4 length|% / 1-4 length|%;
注释：按此顺序设置每个 radii 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。

定义和用法

border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。
提示：该属性允许您为元素添加圆角边框！

border-radius的数值有三种表示方法：px、%、em，对于border-radius的值的设置，我们常用的有四种写法：
（1）当border-radius只有一个属性值时，表示盒子的四个角都是半径为该值的圆角。
例如：border-radius:5px;表示该盒子四个角都为半径为5px的圆角。

当border-radius属性值为50%时：
当盒子宽高相同时，此时盒子为圆形；
当盒子宽高不同时，此时盒子为椭圆形。
（2）当border-radius属性值为两个时，第一个值表示左上角和右下角半径为该值，第二个值表示右上角和左下角半径为该值。
例如：border-radius:10px 20px;
第一个值表示左上角和右下角半径为10px，第二个值表示右上角和左下角半径为20px的圆角。
（3）border-radius属性值为4个值时，这四个值按顺序分别表示的角为左上 右上 右下 左下。
例如：border-radius:10px 20px 30px 40px；这四个值按顺序分别表示的角为左上角为半径10px的圆角 右上角为半径20px的圆角 右下角为半径为30px的圆角 左下角为半径40px的圆角。
（4）可以单独对一个角设置为圆角：
左下角：border-bottom-left-radius:10px;
右下角：border-bottom-right-radius:10px;
左上角：border-top-left-radius:10px;
右上角：border-top-right-radius:10px;

注意事项

在设置对象为圆形的时候，如果使用了border、padding等情况时，对象的实际显示宽高已经不再是设置的width和height的数值，如果border-radius设置的值仍为原本的width和height的一半，可能达不到预期的真正的圆形的效果。
例如：
Div样式如下时：

此时效果：

解决方案：

方法1：可以通过设置百分比50%的方式来解决这一情况

效果：

方法2：计算一下实际的高度再来设置border-radius的数值。上面这个例子，div实际的宽高应该是100 + 20 * 2 = 140px，所以border-radius应该设置为70px

效果：

浏览器支持

IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-radius 属性。