深入理解border-radius

圆角是CSS中一个很复杂的属性，彻底理解后可以创造出很多奇妙的效果，先看一个demo：

例1是正方形，例2是矩形，他们的圆角值都是50%，既然是百分比就有相对元素，其实百分比是相对于元素自身的大小（包括边框和内边距），于是想得到一个圆形只需要把正方形圆角设置为50%就可以了，我们都知道border-radius是一个简写属性，上面的例1相当于border-radius: 100px，展开就是border-radius: 100px 100px 100px 100px / 100px 100px 100px 100px 。例2相当于border-radius: 100px / 150px, 展开就是border-radius: 100px 100px 100px 100px / 150px 150px 150px 150px, 没错是八个值，他们分别代表:

"左上角水平圆角半径大小 右上角水平圆角半径大小 右下角水平圆角半径大小 左下角水平圆角半径大小 / 左上角垂直圆角半径大小 右上角垂直圆角半径大小 右下角垂直圆角半径大小 左下角垂直圆角半径大小;"

但是例三中，我设置border-radius: 200px仍然得到一个圆，这里主要是因为border-radius的一个特性：

大值特性

何为大值特性？即当圆角半径足够大时，只会使用能够渲染的圆角大小渲染。那何为足够大呢？昨天在地铁上想了一路，我的理解就是：
“左上角水平圆角半径大小 + 右上角水平圆角半径大小 = 元素的宽度 = 最大水平半径；
右下角水平圆角半径大小 + 左下角水平圆角半径大小 = 元素的宽度 = 最大水平半径；
左上角垂直圆角半径大小 + 左下角垂直圆角半径大小 = 元素的高度 = 最大垂直半径；
右上角垂直圆角半径大小 + 右下角垂直圆角半径大小 = 元素的高度 = 最大垂直半径”

所以例3我设置border-radius: 200px得到的还是一个圆，他相当于border-radius: 200px 200px 200px 200px / 200px 200px 200px 200px。200加200大于了元素自身的宽高，超过了能渲染的大小，那真么办呢？圆角的第二个特性上场：

等比例特性

圆角水平半径和圆角垂直半径的比值时恒定的。比如说你设置 border-radius: 200px，很显然比值200 ： 200 = 1是恒定不变的，但是200 + 200 = 400超过了最大渲染半径，那就按照1:1缩小，直到在最大渲染半径内。
下面的图表示了水平半径和垂直半径：

对于正方形而言，水平半径和垂直半径是相等的，所以他们的比例是1:1，
当我设置border-radius: 200px时，根据大值特性，圆角半径最大为200px，而且比例还是1:1，所以border-radius: 200px就相当于border-radius: 100px.

例5中是为了和例2做对比，设置border-radius: 200px / 300px和设置border-radius: 100px / 150px得到的都是一个椭圆，根据等比特性100:150 = 200： 300 = 2 ：3恒定不变，根据大值特性圆角的水平半径最大为200px，垂直半径最大为300px，所以他们是等价的，最大渲染100px / 150px。

迟到的例4

理解了圆角的两大特性，例4就很好理解了，border-radius: 200px比例是1:1，但是200 + 200 > 200超过了最大渲染水平半径，200+200 > 300超过最大渲染垂直半径，那就按照1:1缩小到100px, 100 + 100 = 200, 100 + 100 < 300，所以border-radius: 200px和border-radius: 100px效果是一样的，不信你可以试下。

单个圆角设置

border-top-left-radius: 100px;
border-top-right-radius: 100px;
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;

值得一提的是这里的属性值也是缩写，它实际相当于下面：

border-top-left-radius: 100px  100px;
border-top-right-radius: 100px  100px;
border-bottom-left-radius: 100px  100px;
border-bottom-right-radius: 100px  100px;

两个值一个是水平半径，一个是垂直半径，它们之间用空格分隔，他们也有等比特性和大值特性，和border-radius一样不在啰嗦。