靈活的橢圓形

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

問題

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

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

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

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

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

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

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

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

解決方案

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

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

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

border-radius: 100px / 75px;

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

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

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

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

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

border-radius: 50% / 50%;

因?yàn)樾备芮昂蟮闹凳且粯拥模ūM管它們計(jì)算出的是不同的值），我們可以把它進(jìn)一步簡(jiǎn)化為：

border-radius: 50%;

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

為什么要使用border-radius？

很多人好奇border-radius為什么叫這個(gè)名字，因?yàn)樗氖褂貌簧婕暗竭吙?。?code>corner-radius還更合適一些。這樣叫的原因是border-radius包裹了元素的邊框盒的邊緣。如果元素沒有邊框的話，就沒有任何區(qū)別了，但是如果有邊框，它就是邊框的外圓角。內(nèi)圓角的近似值較小（max(0, border-radius?-?border-width)比較精確）。

半橢圓

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

圖注：一個(gè)半橢圓

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

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

幸好，border-radius的語法比較靈活。你可能會(huì)很驚訝border-radius竟然是一個(gè)簡(jiǎn)寫?。∥覀兛梢詾槊總€(gè)角提供不同的值，有兩個(gè)方法可以來完成。一種方法是使用普通寫法來組成：

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

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

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

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

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

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

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

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

創(chuàng)建一個(gè)沿著縱軸截?cái)嗟臋E圓也非常容易：

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

效果如下圖所示：

圖注：沿著縱軸截?cái)嗟陌霗E圓

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

四分之一橢圓

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

圖注：四分之一橢圓

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

border-radius: 100% 0 0 0;

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

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

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

總結(jié)

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