CSS3.0圆角属性实现圆角

圆角属性简介：

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-

转载于:https://www.cnblogs.com/LYT731013/p/7141982.html