关于css制作圆角

三个阶段：

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以下版本不支持，在移动端广泛运用，是趋势。

 

转载于:https://www.cnblogs.com/willYKYao/p/5954273.html