首页 > 代码库 > 关于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制作圆角
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。