圓角是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一樣不在啰嗦。