首页 > 代码库 > 关于css制作圆角

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

 

关于css制作圆角