CSS3 border-radius（一）

定义和用法

border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。

语法

   据w3c上的官方解释

border-radius: 1-4 length|% / 1-4 length|%;

1-4指的是radius的四个值，length和%指的是值的单位。
border-radius可以设置4个参数依次是从（上左下右）顺时针为：上左，上右，下右，下左

.box{
   border-radius:5px 10px 50px 20px;
}

 

设置两个参数时：

 上左与下右值为一致， 上右与下左值为一致； （tips:两个参数时，斜对角值是相等的）

未简写时：border-radius:5px 10px 5px 10px; （上左， 上右，  下右， 下左）；

简写后：

.box{
   border-radius:5px 10px
}

 

设置三个值时：

上右与下左值是相等

 为简写：border-radius:5px 10px 15px 10px;  你会发现 有个斜对角相等。

.box{
   border-radius:5px 10px 15px
}

 

在border-radius中会出现 斜杠 / 分开后面的参数。 第一个参数表示圆角的水平半径，第二个参数表示圆角的垂直半径

.box{
   border-radius:5px/10px;
}

表示所有角的水平半径为5px , 垂直半径为10px

 

不正确的，

border-radius:5px/10px  5px/10px  5px/10px 5px/10px; 

正确

border-radius:5px 5px 5px 5px / 10px 10px 10px 10px;

按照顺时针方向，斜杠左边是 水平半径，右边是 垂直半径

 

W3C提到兼容浏览器支持

IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-radius 属性。

 

-moz代表firefox浏览器私有属性
-ms代表ie私有属性
-webkit代表chrome、safari私有属性

兼容不通浏览器需要添加前缀

-webkit-border-radius:5px;