border-radius归纳

一.基本语法

1.1

语法	解释
border-radius:10px	将创建四个大小一样的圆角。
border-radius:10px 15px 10px 5px;	四个值分别表示左上角、右上角、右下角、左下角。
border-radius:10px 15px;	第一个值表示左上角、右下角；第二个值表示右上角、左下角。
border-radius:10px 15px 5px;	第一个值表示左上角；第二个值表示右上角、左下角；第三个值表示右下角。
border-bottom-left-radius:20px 10px;	创建不对称的角–椭圆角。
border-radius:20px/10px;	写椭圆角的时候，可以用短写法，创建四个一样的椭圆角。
border-radius:10px 20px 30px 40px	四个值分别表示四个角的半径（水平和垂直半径一样)。
border-radius:10px 20px 30px 40px/20px 50px 30px 10px;	斜杠前面的一组四个值分别表示四个角的水平半径；斜杠后面的一组四个值分别表示四个角的垂直半径。
border-radius:10px 20px 40px/20px 50px;	斜杠前面和后面每一组分别表示的是四个角水平半径和四个角垂直半径。

1.2

border-top-left-radius(同理还有border-top-right-radius，border-bottom-left-radius，border-bottom-left-radius);

border-top-left-radius:水平方向值，垂直方向值；参考下两个图的对比，水平方向值相同，垂直不同

 

图1.2.1（如上） border-top-left-radius值20px 40px;

 

图1.2.2（如上） border-top-left-radius值20px 60px

1.3.兼容性

firefox，chrome，opera支持，IE8及以下不支持