CSS3中border-radius的八个参数

使用border-radius经常是直接用四个以下的参数,再看到“/”分开可以达到四个以上参数时瞬间懵了,记录一下:
完整的border-radius写法

border-radius:1 2 3 4 / 5 6 7 8

分别对应下图的位置

.box {
            width: 100px;
            height: 100px;
            background-color: yellow;
            border-radius: 50px / 20px 20px 40px 40px ;
             }

此时1,2,3,4都为50px,可以绘制出各种不一样的图形

顺带提一下兼容性问题:
IE9+,FireFox4+,Chrome,Safari5+,Opera
遇到低版本浏览器需要加前缀
-webkit- ~ Chrome
-moz- ~ FireFox
-ms- ~ IE
-o- ~ Opera

在使用Less编译CSS的时候又遇到一个问题
Less会对运算符‘/’ 进行运算，导致

border-radius:100px / 50px ;
//经Less编译后
border-radius:2px ;

解决方案：
在Less中这样写

border-radius:~‘100px / 50px’;

参考：https://segmentfault.com/q/1010000004392434