首页 > 代码库 > CSS3.0圆角属性实现圆角

CSS3.0圆角属性实现圆角

2024-10-20 13:13:38   209人阅读

圆角属性简介：

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圆角属性实现圆角


联系
我们