原文出處：http://www.w3cplus.com/css3/css-secrets/flexible-ellipses.html

問題

你可能注意過，在很多時候任何方形元素都可以直接應(yīng)用一個非常大的border-radius來變成圓形，用類似下面這樣的CSS代碼：

background: #fb3;
width: 200px;
height: 200px;
border-radius: 100px; /* >= 邊長的一半 */

圖注:大小固定，border-radius的值為邊長一半，對應(yīng)生成的圓

你也可以指定大于100px的border-radius，這同樣會生成一個圓。原因請閱讀規(guī)范：

當(dāng)任何兩個相鄰邊框半徑之和超過了邊框盒的尺寸，客戶端必須按比例減小所有邊框半徑的值，直到它們相互之間沒有重疊。 —?CSS Backgrounds & Borders Level 3

但是，我們的元素并不能總是指定固定的寬度和高度，因為我們希望它能夠根據(jù)自己的內(nèi)容自適應(yīng)，而最后的元素大小是無法預(yù)知的。即使我們正在設(shè)計一個靜態(tài)網(wǎng)站，而且它的內(nèi)容是預(yù)先確定的，某個時候我們可能也想要進(jìn)行修改；或者它可能會根據(jù)不同的度量顯示成降級的字體。在這種情況下，如果它的寬度和高度不完全相等，我們通常希望它變成一個橢圓；如果相等，則為圓。但是，我們前面的代碼卻不是這樣的。當(dāng)寬度大于高度時，它的結(jié)果下圖所示。

圖注：前面的示例，當(dāng)寬度大于高度時的情況；border-radius的圓在這里用虛線繪出

我們可以用border-radius做一個橢圓，而且是靈活的橢圓嗎？

解決方案

一個鮮為人知的內(nèi)容是：border-radius接受水平和垂直方向不同值，使用斜杠(/)來分隔它們。這可以讓我們在圓角處取整來創(chuàng)建橢圓。

圖注：水平和垂直方向border-radius值不同的盒子；現(xiàn)在我們的圓角曲線變成了那個我們指定的border-radius值的橢圓，這里用虛線表示

所以，如果我們有一個200px × 150px尺寸的元素，我們可以把它變成一個水平和垂直半徑分別對應(yīng)為其寬度和高度值一半的橢圓：

border-radius: 100px / 75px;

你看到結(jié)果如下圖所示：

圖注：應(yīng)用不同的border-radius曲線創(chuàng)建的橢圓

但是，這有一個非常大的缺陷：如果元素尺寸發(fā)生變化，border-radius的值也必須相應(yīng)改變。你可以下圖中看到border-radius的結(jié)果，如果我們把上邊的半徑應(yīng)用給一個200px × 300px的元素。如果我們的元素尺寸依賴于內(nèi)容，問題就出現(xiàn)了。

圖注：尺寸變化會破壞我們的橢圓；但是好的一點是，這種形狀在一些圓柱中非常好用！

border-radius的另一個鮮為人知的特性是它還接受百分比值，不只是長度值。百分比可以解析為相應(yīng)的尺寸，水平半徑的寬度和垂直半徑的高度。這意味著相同的百分比可以計算出不同的水平半徑和垂直半徑。因此，為了創(chuàng)建靈活橢圓，我們可以給半徑應(yīng)用50%：

border-radius: 50% / 50%;

因為斜杠前后的值是一樣的（盡管它們計算出的是不同的值），我們可以把它進(jìn)一步簡化為：

border-radius: 50%;

結(jié)果就是只用一行CSS就可以創(chuàng)建出靈活的橢圓，不必考慮元素的寬度和高度。

為什么要使用border-radius？

很多人好奇border-radius為什么叫這個名字，因為它的使用不涉及到邊框。叫corner-radius還更合適一些。這樣叫的原因是border-radius包裹了元素的邊框盒的邊緣。如果元素沒有邊框的話，就沒有任何區(qū)別了，但是如果有邊框，它就是邊框的外圓角。內(nèi)圓角的近似值較?。?code>max(0, border-radius?-?border-width)比較精確）。

半橢圓

現(xiàn)在我們已經(jīng)知道如何用CSS創(chuàng)建一個靈活的橢圓，自然而然我們就會想到我們是否可以創(chuàng)建其它常見的形狀，比如橢圓的一部分。我們可以花點時間來看看如何創(chuàng)建一個半橢圓。

圖注：一個半橢圓

一個半橢圓在寬度等于高度兩倍的時候，可以變成一個半圓（或當(dāng)高度是寬度的兩倍，橢圓沿著橫軸剪斷）。

它是相對于縱軸對稱的，但不相對于橫軸對稱。即使我們還無法知道確切的border-radius的值（它可以是所有可能的值），對于每個角我們需要不同的半徑值這點是很明確的。但是，我們目前嘗試過的是四個角都用同一個半徑值。

幸好，border-radius的語法比較靈活。你可能會很驚訝border-radius竟然是一個簡寫??！我們可以為每個角提供不同的值，有兩個方法可以來完成。一種方法是使用普通寫法來組成：

• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius

但是，比較簡潔的方式是直接使用border-radius簡寫，應(yīng)用多組值，用空格分隔。如果我們提供四個值，分別應(yīng)用于對應(yīng)的角，從左上角開始，順時針旋轉(zhuǎn)。如果我們提供少于四個值，它們以通常的CSS方式相乘，類似于border-width這樣的屬性。三個值的情況表示第四個值和第二個值相等，兩個值的情況表示第三個值和第一個值相等。

圖注：分別指定了4，3，2或1個值的border-radius屬性（用空格分隔）對應(yīng)的圖。（注意橢圓的半徑，斜杠前后都可以達(dá)到四個值，它們指的都是相同的角，斜杠前的是水平半徑，斜杠后的是垂直半徑）。

上圖為這個原理提供了一個可視化的解釋。我們甚至可以為四個角分別應(yīng)用不同的水平半徑和垂直半徑，通過在斜杠前后分別應(yīng)用1-4個值。需要注意的是，這些可以分別擴(kuò)展成四個值。例如，10px / 5px 20px的border-radius值，等于10px 10px 10px 10px / 5px 20px 5px 20px。

有了這個新東西之后，我們現(xiàn)在再來看看半橢圓的問題。指定這樣的border-radius的值是否可以生成像這樣的形狀呢？不去嘗試我們也不會知道結(jié)果。開始做之前我們先分析一下：

• 形狀在水平方向是對稱的，這也就意味著左上角和右上角的半徑是一樣的；同樣的，左下角和右下角的半徑也是一樣的。
• 頂部沒有水平邊緣（如，整個頂部是曲線），也就是說左上角和右上角的半徑應(yīng)該都是該形狀寬度的100%。
• 從前面的兩條分析，我們可以推斷，頂角水平方向的左右半徑應(yīng)該是50%。
• 垂直方向，頂部的兩個角都應(yīng)用了整個元素的高度，底部的角沒有圓角。因此，垂直方向的border-radius的值應(yīng)該是100% 100% 0 0。
• 因為底部角的垂直圓角是0，水平方向的圓角是多少都沒有關(guān)系了，因為它們最后計算出的結(jié)果都會是0。（你可以想象一個圓角的垂直半徑為0，而水平半徑為正值嗎？即使是規(guī)范的編輯也沒辦法做好。）

綜上所述，我們可以很簡單地寫出靈活半橢圓的CSS代碼，下圖那樣的：

border-radius: 50% / 100% 100% 0 0;

創(chuàng)建一個沿著縱軸截斷的橢圓也非常容易：

border-radius: 100% 0 0 100% / 50%;

效果如下圖所示：

圖注：沿著縱軸截斷的半橢圓

作為一個練習(xí)，試試寫一下另一半橢圓的CSS代碼。

四分之一橢圓

在創(chuàng)建了橢圓和半橢圓之后，下一個問題自然是我們是否可以創(chuàng)建一個四分之一橢圓，像下圖所示：

圖注：四分之一橢圓

按照之前類似的思考過程，我們注意到，要創(chuàng)建一個四分之一橢圓，其中一個角需要有一個100%半徑，水平和垂直方向都是，而其它四個則沒有圓角。因為四個角的水平和垂直半徑的百分比都是一樣的，就不需要應(yīng)用斜杠了。代碼如下所示：

border-radius: 100% 0 0 0;

和半橢圓的示例相似，當(dāng)元素的寬度和高度相等時，它就變成四分之一圓了。

但是，你現(xiàn)在可能好奇橢圓的其它部分用border-radius是否可以完成（如，八分之一橢圓是否可以？三分之一？），我想你可能會失望了，因為沒有可能的border-radius值可以生成這樣的形狀。

Simurai熟練并且充分地使用border-radius來為它的BonBon按鈕創(chuàng)建各種形狀。

總結(jié)

border-radius可以給一個元素制作圓角。險些之外，還可以使用它制作隨圓形。而這篇文章中主要闡述了如何使用border-radius制作除圓之外的圖形——橢圓形。