我們知道border-radius允許您為元素添加圓角邊框！
而border-radius 屬性是一個簡寫屬性，用於設置四個 border-*-radius 屬性。
如果省略 bottom-left，則與 top-right 相同。如果省略 bottom-right，則與 top-left 相同。如果省略 top-right，則與 top-left 相同。
先看個例子。
如果將有個正方形元素設置一個border-radius值為邊長的一半，則可以得到一個圓形。
width: 200px;height: 200px;border-radius: 100px;background: brown;
效果圖：
這里寬高是固定的且相等，如果寬高不相等則顯示為一個橢圓。
寬高不等效果圖：
自適應橢圓
由於根據實際情況出發，我們希望它能根據實際的內容自動調整並適應。
解決方案：
一個鮮為人知的秘密，border-radius可以單獨設置水平和垂直的半徑，只需要用一個斜杠（/）分隔這二個值就行。此外我們還要知道border-radius不僅可以接受長度值還可以接受百分比值。
width: 150px;height: 100px;border-radius: 50%/50%; //簡寫屬性：border-radius:50%
background: brown;
只需這一行簡單的代碼就可以完成自適應的橢圓了。很神奇吧。
半橢圓
我們知道border-radius是個簡寫屬性，它得展開式：
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-botom-left-radius
這四個字如上的順序，從左上角開始順時針應用到元素其他三個角上。
但是真正簡介的寫法還是使用border-radius這個簡寫屬性，只需對應上面的規則，用空格分開多個值，也能達到展開式的效果。
如果只提供了三個值：1 2 3 則第4個值和第2個值相同。如果只提供了二個值：1 2 則1 3相同，2 4值相同。
我們甚至可以為四個角設置不同的水平和垂直半徑，方法就是在斜杠前指定一到四個值，斜杠后指定一到四個值。
width: 150px;height: 100px;border-radius: 50%/0 0 100% 100%;background: brown;
變換一下：
width: 150px;height: 100px;border-radius: 50%/100% 100% 0 0;background: brown;
來一個小紅帽：
width: 150px;height: 100px;border-radius: 50%/50% 50% 0 0;background: brown;
width: 150px;height: 100px;border-radius: 100% 0 0 100%/ 50%;background: brown;//沿着縱軸切開的橢圓
同理，可以得出：
width: 150px;height: 100px;border-radius: 0 100% 100% 0/ 50%;background: brown;
四分之一的橢圓
那么，有辦法得到四分之一橢圓呢？我們從效果圖看出，創建一個四分之一的橢圓，只要一個角的水平和垂直半徑值都需要是100%，
而其他三個角都不能設圓角。因為四個角的水平和垂直半徑方向上是相同的，所以不需要用斜杠語法了。
所以
width: 150px;height: 100px;border-radius:0 0 100% 0;background: brown;
效果如下：
