标签：
三个阶段：
1.背景图片；
2.css2.0+标签模拟圆角；
3.css3.0圆角属性（border-radius）.
1.1.背景图片--宽度固定，高度自适应圆角
为容器设置宽度
在主体的上方加一个div，以上圆角为背景；在主体的下方加一个div，以下圆角为背景。
1.2.背景图片--宽高自适应圆角
容器设置了相对定位，左上、右上、左下、右下div定位在四个角上，以遮盖原来直角的原理形成圆角。
2.css2.0+标签模拟圆角
哦，我决定跳过了，直接css3好了。
3.css3.0圆角属性（border-radius）
给需要圆角的主体，设置border-radius属性，可用像素或者百分比为单位，数值代表圆角半径越大越弧。
上左border-top-left-radius、上右border-top-right-radius、下右border-bottom-right-radius、下左border-bottom-left-radius
border-radius：上左弧度 上右弧度 下右弧度 下左弧度；（顺时针）
border-radius：上左和下右弧度 上右和下左弧度；（对角）
单独不要弧度时设置为0，而不是none;
-moz-兼容老的火狐 -ms-兼容老ie -webkit-兼容Safari、Chrome
比较：
背景图片实现圆角是主流（2014年）
css2.0增加很多无意义代码，实现效果不自然等
css3代码少就可以实现效果，但是在ie8以下版本不支持，在移动端广泛运用，是趋势。
标签：
原文地址：http://www.cnblogs.com/willYKYao/p/5954273.html
