看了w3s關于border-radius屬性的知識http://www.49028c.com.cn/CSSref/PR_border-radius.asphttp://www.49028c.com.cn/cssref/pr_border-radius.asp總覺得還是有點迷糊，于是就實踐一番稍作了解后在這做個總結。

先看w3c例子一：

border-radius:2em;等價于：
border-top-left-radius:2em;border-top-right-radius:2em;border-bottom-right-radius:2em;border-bottom-left-radius:2em;例子一知道了 border-radius 值設置的順序從 top-left 到top-right 到bottom-right 到bottom-left 
也就是一個四邊形的 左上，右上，右下，左下。一個順時針的方向。
如果
border-radius:2em 3em 1em 5em;就順時針一一對應就明白了。
再看w3c例子二：
border-radius: 2em 1em 4em / 0.5em 3em;等價于
border-top-left-radius: 2em 0.5em;border-top-right-radius: 1em 3em;border-bottom-right-radius: 4em 0.5em;border-bottom-left-radius: 1em 3em;剛開始看這個例子就覺得：前半部分還是能看明白的 那后半部分 斜杠后面的是什么鬼？抱著這樣的問題就去陶騰了。
先說下前半部分的意思。
可以看到 只設置了3個值 但最后一個值卻是1em 沒有設置的值是怎么來的呢，w3s上有給出解釋：
如果省略 bottom-left，則與 top-right 相同。如果省略 bottom-right，則與 top-left 相同。如果省略 top-right，則與 top-left 相同
這樣就知道最后一個值是怎么來的了。
再來看斜杠和后面的值，如果先不管作用，先看是如何設置的看如下例子
border-radius: 2em 1em 4em / 0.5em 3em 1em;等價于：
border-top-left-radius: 2em 0.5em;border-top-right-radius: 1em 3em;border-bottom-right-radius: 4em 1em;border-bottom-left-radius: 1em 3em;再來一個：
border-radius: 2em 1em 4em / 0.5em 3em 1em 2em;等價于：
border-top-left-radius: 2em 0.5em;border-top-right-radius: 1em 3em;border-bottom-right-radius: 4em 1em;border-bottom-left-radius: 1em 2em;看了2個例子應該也就明白了。接下來看作用。
在這里我用div做個橢圓來解釋作用，看代碼
width: 200px;height: 100px;background-color:black;border-radius: 100px / 50px;等價于：
width:200px;height:100px;background-color:black;border-top-left-radius:100px 50px;border-top-right-radius:100px 50px;border-bottom-right-radius:100px 50px;border-bottom-left-radius:100px 50px;就單看
border-top-left-radius:100px 50px;這一行代碼與
border-top-left-radius:50px 50px;做比較（不會上傳效果圖很蛋疼）這就看明白了平常的
border-top-left-radius:50px;等價于
border-top-left-radius:50px 50px;最后關于制作橢圓
width: 200px;height: 100px;background-color:black;border-radius: 50%;與上面的效果相同。至于為什么 如果上面看懂了，理解這玩意應該沒問題。
莫打我-。-