border-radius知识点整理

       这几天属于闲置人员，就开始瞎琢磨，突然想到border-radius，就去翻了张鑫旭的微博，很神奇，他还有这么多门门道道。

1.border-radius取百分比值时，是相对于元素占据尺寸的百分比，累死jquery的outerWidth之类的，是包含边框、padding后的尺寸， 而不是单纯的相对于width值

2.border-radius：300px也是一个简写值，和padding、margin一样，这个的完整版本是300px 300px 300px 300px/300px 300px 300px 300px

border-radius: 左上角水平圆角半径大小 右上角水平圆角半径大小 右下角水平圆角半径大小 左下角水平圆角半径大小/左上角垂直圆角半径大小 右上角垂直圆角半径大小 右下角垂直圆角半径大小 左下角垂直圆角半径大小;

3.它有大值特性，即无论元素占据尺寸有多少，它可以设置更大的值

4.它有等比特性，假如图形所占尺寸是300 * 200，当你水平半径和垂直半径都设置为300px时，由于他垂直不能超过200，所以垂直为200，但同时它要保持设置它时的比例1：1，所以会变成200px和200px的情况。所以这样的话为了让它的变化和原图形保持一致就在设置时设置为3：2这样的比例比较保险

5.border-垂直-水平-radius: 水平 垂直

.radius {  border-top-left-radius: 200px 100px;  border-top-right-radius: 200px 100px;  border-bottom-left-radius: 200px 100px;  border-bottom-right-radius: 200px 100px;}