> 原文出處：http://www.w3cplus.com/css3/css-secrets/flexible-ellipses.html
## 問題
你可能注意過，在很多時候任何方形元素都可以直接應用一個非常大的`border-radius`來變成圓形，用類似下面這樣的CSS代碼：
~~~
background: #fb3;
width: 200px;
height: 200px;
border-radius: 100px; /* >= 邊長的一半 */
~~~
*圖注:大小固定，`border-radius`的值為邊長一半，對應生成的圓*
你也可以指定大于`100px`的`border-radius`，這同樣會生成一個圓。原因請閱讀規范：
> 當任何兩個相鄰邊框半徑之和超過了邊框盒的尺寸，客戶端必須按比例減小所有邊框半徑的值，直到它們相互之間沒有重疊。 —?[CSS Backgrounds & Borders Level 3](http://www.w3.org/TR/css3-background/#corner-overlap)
但是，我們的元素并不能總是指定固定的寬度和高度，因為我們希望它能夠根據自己的內容自適應，而最后的元素大小是無法預知的。即使我們正在設計一個靜態網站，而且它的內容是預先確定的，某個時候我們可能也想要進行修改；或者它可能會根據不同的度量顯示成降級的字體。在這種情況下，如果它的寬度和高度不完全相等，我們通常希望它變成一個橢圓；如果相等，則為圓。但是，我們前面的代碼卻不是這樣的。當寬度大于高度時，它的結果下圖所示。
*圖注：前面的示例，當寬度大于高度時的情況；`border-radius`的圓在這里用虛線繪出*
我們可以用`border-radius`做一個橢圓，而且是靈活的橢圓嗎？
## 解決方案
一個鮮為人知的內容是：`border-radius`接受水平和垂直方向不同值，使用斜杠(`/`)來分隔它們。這可以讓我們在圓角處取整來創建橢圓。
*圖注：水平和垂直方向`border-radius`值不同的盒子；現在我們的圓角曲線變成了那個我們指定的`border-radius`值的橢圓，這里用虛線表示*
所以，如果我們有一個`200px × 150px`尺寸的元素，我們可以把它變成一個水平和垂直半徑分別對應為其寬度和高度值一半的橢圓：
~~~
border-radius: 100px / 75px;
~~~
你看到結果如下圖所示：
*圖注：應用不同的`border-radius`曲線創建的橢圓*
但是，這有一個非常大的缺陷：如果元素尺寸發生變化，`border-radius`的值也必須相應改變。你可以下圖中看到`border-radius`的結果，如果我們把上邊的半徑應用給一個`200px × 300px`的元素。如果我們的元素尺寸依賴于內容，問題就出現了。
*圖注：尺寸變化會破壞我們的橢圓；但是好的一點是，這種形狀在一些圓柱中非常好用！*
`border-radius`的另一個鮮為人知的特性是它還接受百分比值，不只是長度值。百分比可以解析為相應的尺寸，水平半徑的寬度和垂直半徑的高度。這意味著相同的百分比可以計算出不同的水平半徑和垂直半徑。因此，為了創建靈活橢圓，我們可以給半徑應用`50%`：
~~~
border-radius: 50% / 50%;
~~~
因為斜杠前后的值是一樣的（盡管它們計算出的是不同的值），我們可以把它進一步簡化為：
~~~
border-radius: 50%;
~~~
結果就是只用一行CSS就可以創建出靈活的橢圓，不必考慮元素的寬度和高度。
### 為什么要使用`border-radius`？
很多人好奇`border-radius`為什么叫這個名字，因為它的使用不涉及到邊框。叫`corner-radius`還更合適一些。這樣叫的原因是`border-radius`包裹了元素的邊框盒的邊緣。如果元素沒有邊框的話，就沒有任何區別了，但是如果有邊框，它就是邊框的外圓角。內圓角的近似值較小（`max(0, border-radius`?-?`border-width)`比較精確）。
## 半橢圓
現在我們已經知道如何用CSS創建一個靈活的橢圓，自然而然我們就會想到我們是否可以創建其它常見的形狀，比如橢圓的一部分。我們可以花點時間來看看如何創建一個半橢圓。
*圖注：一個半橢圓*
> 一個半橢圓在寬度等于高度兩倍的時候，可以變成一個半圓（或當高度是寬度的兩倍，橢圓沿著橫軸剪斷）。
它是相對于縱軸對稱的，但不相對于橫軸對稱。即使我們還無法知道確切的`border-radius`的值（它可以是所有可能的值），對于每個角我們需要不同的半徑值這點是很明確的。但是，我們目前嘗試過的是四個角都用同一個半徑值。
幸好，`border-radius`的語法比較靈活。你可能會很驚訝`border-radius`竟然是一個簡寫！！我們可以為每個角提供不同的值，有兩個方法可以來完成。一種方法是使用普通寫法來組成：
* `border-top-left-radius`
* `border-top-right-radius`
* `border-bottom-right-radius`
* `border-bottom-left-radius`
但是，比較簡潔的方式是直接使用`border-radius`簡寫，應用多組值，用空格分隔。如果我們提供四個值，分別應用于對應的角，從左上角開始，順時針旋轉。如果我們提供少于四個值，它們以通常的CSS方式相乘，類似于`border-width`這樣的屬性。三個值的情況表示第四個值和第二個值相等，兩個值的情況表示第三個值和第一個值相等。
*圖注：分別指定了`4`，`3`，`2`或`1`個值的`border-radius`屬性（用空格分隔）對應的圖。（注意橢圓的半徑，斜杠前后都可以達到四個值，它們指的都是相同的角，斜杠前的是水平半徑，斜杠后的是垂直半徑）。*
上圖為這個原理提供了一個可視化的解釋。我們甚至可以為四個角分別應用不同的水平半徑和垂直半徑，通過在斜杠前后分別應用`1-4`個值。需要注意的是，這些可以分別擴展成四個值。例如，`10px / 5px 20px`的`border-radius`值，等于`10px 10px 10px 10px / 5px 20px 5px 20px`。
有了這個新東西之后，我們現在再來看看半橢圓的問題。指定這樣的`border-radius`的值是否可以生成像這樣的形狀呢？不去嘗試我們也不會知道結果。開始做之前我們先分析一下：
* 形狀在水平方向是對稱的，這也就意味著左上角和右上角的半徑是一樣的；同樣的，左下角和右下角的半徑也是一樣的。
* 頂部沒有水平邊緣（如，整個頂部是曲線），也就是說左上角和右上角的半徑應該都是該形狀寬度的`100%`。
* 從前面的兩條分析，我們可以推斷，頂角水平方向的左右半徑應該是`50%`。
* 垂直方向，頂部的兩個角都應用了整個元素的高度，底部的角沒有圓角。因此，垂直方向的`border-radius`的值應該是`100% 100% 0 0`。
* 因為底部角的垂直圓角是0，水平方向的圓角是多少都沒有關系了，因為它們最后計算出的結果都會是`0`。（你可以想象一個圓角的垂直半徑為`0`，而水平半徑為正值嗎？即使是規范的編輯也沒辦法做好。）
綜上所述，我們可以很簡單地寫出靈活半橢圓的CSS代碼，下圖那樣的：
~~~
border-radius: 50% / 100% 100% 0 0;
~~~
創建一個沿著縱軸截斷的橢圓也非常容易：
~~~
border-radius: 100% 0 0 100% / 50%;
~~~
效果如下圖所示：
*圖注：沿著縱軸截斷的半橢圓*
作為一個練習，試試寫一下另一半橢圓的CSS代碼。
## 四分之一橢圓
在創建了橢圓和半橢圓之后，下一個問題自然是我們是否可以創建一個四分之一橢圓，像下圖所示：
*圖注：四分之一橢圓*
按照之前類似的思考過程，我們注意到，要創建一個四分之一橢圓，其中一個角需要有一個`100%`半徑，水平和垂直方向都是，而其它四個則沒有圓角。因為四個角的水平和垂直半徑的百分比都是一樣的，就不需要應用斜杠了。代碼如下所示：
~~~
border-radius: 100% 0 0 0;
~~~
> 和半橢圓的示例相似，當元素的寬度和高度相等時，它就變成四分之一圓了。
但是，你現在可能好奇橢圓的其它部分用`border-radius`是否可以完成（如，八分之一橢圓是否可以？三分之一？），我想你可能會失望了，因為沒有可能的`border-radius`值可以生成這樣的形狀。
[](http://simurai.com/archive/buttons)
Simurai熟練并且充分地使用`border-radius`來為它的[BonBon按鈕](http://simurai.com/archive/buttons/)創建各種形狀。
## 總結
[`border-radius`](http://www.w3cplus.com/node/48)可以給一個元素制作圓角。險些之外，還可以使用它制作隨圓形。而這篇文章中主要闡述了如何使用`border-radius`制作除圓之外的圖形——**橢圓形**。
