认识CSS3—更容易的网页细节border-radius属性

border-radius属性

这个属性在CSS3里用来创建圆角，它的值类似于padding和margin的写法

boder-radius：一个值表示四个角

?

1 2 3 4 5 6 7

< style > .box{ width:300px;         height:100px;         background:#FC9;         border-radius:30px;} h{padding:60px;} </ style >

boder-radius：两个值，前面一个值控制左上和右下的圆角，后面一个控制右上和左下的圆角

?

1 2 3 4 5 6 7

style> .box{ width:300px;         height:100px;         background:#FC9;         border-radius:30px 50px;} h{padding:60px;} </ style >

border-radius：三个值，第一个值控制左上的圆角，第二个值控制右上和左下的圆角，最后一个值控制右下的圆角。

?

1 2 3 4 5 6

style> .box{ width:300px;         height:100px;         background:#FC9;         border-radius:30px 50px 80px;} </ style >

border-radius：四个值，分别表示左上，右上，右下，左下四个圆角值

?

1 2 3 4 5 6

style> .box{ width:300px;         height:100px;         background:#FC9;         border-radius:30px 50px 80px 100px;} </ style >

由于部分浏览器可能不支持border-radius属性，所以兼容性写法如下：

?

1 2 3

-mo2-border-radius:10px; -wekbit-border-radius:10px; -o-border-radius:10px;