20150809 CSS圆角进化论

三个阶段：背景图 CSS2.0+标签模拟圆角 CSS3.0圆角属性
①背景图
宽度固定，高度自适应   切图，切两边上下或者左右  4个标签，div包裹（圆角上+内容+圆角下）
宽度高度均自适应  切图，切4个角 5个标签div包裹（圆角左上+圆角右上+内容+圆角左下+圆角右下）圆角绝对定位，内容及包裹相对定位
②CSS2.0+标签模拟圆角
原理：应用像素画中绘制弧线的方法进行模拟
阶梯状递减，eg: 1{height:1px;margin:0 2px;background:#acc3e3;}
2{height:1px;margin:0 1px;background:#edf6ff;border-left:1px solid #acc3e3;border-right:1px solid #acc3e3;}
内容{background:#edf6ff;border-left:1px solid #acc3e3;border-right:1px solid #acc3e3;}
③CSS3.0圆角属性
border_radius
解决个浏览器显示差异，针对浏览器写私有前缀：
针对IE浏览器写的私有前缀是-ms-
针对Firefox浏览器写的私有前缀是-moz-
针对Chrome/safari浏览器写的私有前缀是-webkit-
一些css书写规范建议将浏览器私有实现的CSS3属性写在前面标准属性写在后面，因为现在一些CSS3的属性还是草案，等到成为正式标准可能会有更改。这也是浏览器为什么采用私有属性方式实现的原因。但是如果私有属性和最后的标准属性不一致就会有兼容问题。
左上角：border-top-left-radius;右上角：border-top-right-radius;左下角：border-bottom-left-radius;右下角：border-bottom-right-radius;
三种方式对比
1、IE678不支持CSS3.0
2、CSS3.0在移动端得到了广泛的应用
3、CSS2.0+标签模拟圆角代码量少，不需要增加HTTP请求
4、CSS2.0+标签模拟圆角后期维护性好，但是随圆角像素的增加，无意义代码将成倍增加
5、CSS2.0+标签模拟圆角局限性大
6、背景图仍是主流