码迷,mamicode.com
首页 > Web开发 > 详细

CSS3.0圆角属性实现圆角

时间:2017-07-09 18:28:16      阅读:158      评论:0      收藏:0      [点我收藏+]

标签:表示   safari   实现   半径   order   简介   web   显示   ref   

圆角属性简介:

1.属性值:表示圆角半径,可以使用长度单位px,或百分比
2.简写属性:border-radius
3.分量属性:border-top-left-radius(上左)、border-top-right-radius(上右)
border-bottom-right-radius(下右)、 border-bottom-left-radius(下左)
 
圆角简写属性值的设置(与margin属性设置相同,顺时针方向):
1、1个属性值:4个角半径相同
2、2个属性值:第一个值:上左角、下右角;第二个值:上右角、下左角(互为对视角)
3、3个属性值、4个属性值的设置与margin属性相同
 
注意:使用圆角属性必须结合border属性设置(类似设置边框时必须设置 1px solid #acc3e3 三个属性才有效果)
例如
input { border:1px solid #acc3e3 ;border-radius:2px; }
设置右上、下角为直角需加{ border-top-right-radius:0; border-bottom-right-radius:0; }
 
解决各浏览器显示差异,针对浏览器写私有前缀:
 
1、IE内核:-ms-
2、Firefox内核:-moz-
3、谷歌浏览器、safari内核:-webkit-

CSS3.0圆角属性实现圆角

标签:表示   safari   实现   半径   order   简介   web   显示   ref   

原文地址:http://www.cnblogs.com/LYT731013/p/7141982.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!