CSS3属性border-radius的正确使用姿势

border-radius也是经常使用的一个CSS3属性，最近也经常在项目中使用，所以总结记录一番；

border-radius CSS3属性，兼容ie9+及现代浏览器，共有2个属性值，如下所示

border-radius: <length-percentage>{1,4} [ / <length-percentage>{1,4} 半径的第一个语法取值可取1~4个值半径的第二个语法取值也可取1~4个值

常用的几种写法

一个属性值 border-radius: 20px; => border-radius: 20px 20px 20px 20px / 20px 20px 20px 20px;
两个属性值 border-radius: 20px 10px; => border-radius: 20px 10px 20px 10px / 20px 10px 20px 10px;
三个属性值 border-radius: 20px 10px 5px; => border-radius: 20px 10px 5px 10px / 20px 10px 5px 10px;
四个属性值 border-radius: 20px 10px 5px 15px; => border-radius: 20px 10px 5px 15px / 20px 10px 5px 15px；
设置两组属性值 border-radius: 40px 10px 5px 15px / 10px 5px 25px 10px; (40/10左上角， 10/5右上角， 5/25右下角， 15/10左下角),每个值代表的意思如下所示40px(左上上边半径) 10px(右上上边半径) 5px(右下下边半径) 15px(左下下边半径) / 10px(左上左边半径) 5px(右上右边半径) 25px(右下右边半径) 10px(左下左边半径);第一组值要么是上边要么是下边，第二组值要么是左边要么是右边；
不使用简写属性 border-top-left-radius: 40px; => border-top-left-radius: 40px 40px; border-top-right-radius:20px; border-bottom-right-radius: 30px; border-bottom-left-radius: 40px;

总结:理解一点一个元素总共可以设置4个圆角，而一个圆角是需要两个值来进行设置的