首页 > Web开发 > 详细

关于css制作圆角

时间:2016-10-12 22:13:02      阅读:239      评论:0      收藏:0      [点我收藏+]

三个阶段:

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制作圆角

原文:http://www.cnblogs.com/willYKYao/p/5954273.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!