前端知識(shí) | CSS小技巧-自適應(yīng)橢圓

背景知識(shí)：

border-radius 屬性的基本用法。

難題：

你可能注意到過，給任何正方形元素設(shè)置一個(gè)足夠大的 border-radius，就可以把它變成一個(gè)圓形。所用到的 CSS 代碼如下所示：   

圖1.1給元素設(shè)置固定寬高以及一半長(zhǎng)度的 border-radius，可以得到一個(gè)圓形

你可能還注意到了，如果指定任何大于 100px 的半徑，仍然可以得到一個(gè)圓形。規(guī)范特別指出了這其中的原因：

“當(dāng)任意兩個(gè)相鄰圓角的半徑之和超過 borderbox 的尺寸時(shí)，用戶代理必須按比例減小各個(gè)邊框半徑所使用的值，直到它們不會(huì)相互重疊為止?！薄狢SS 背景與邊框（第三版）（http://w3.org/TR/css3-background/#corner-overlap）

不過，我們往往不愿意對(duì)一個(gè)元素指定固定的寬度和高度，因?yàn)槲覀兿Ｍ芨鶕?jù)其內(nèi)容自動(dòng)調(diào)整并適應(yīng)，而內(nèi)容的長(zhǎng)短不可能在事先就知道。即使是在設(shè)計(jì)一個(gè)靜態(tài)網(wǎng)站的時(shí)候（元素的內(nèi)容可以預(yù)先確定），我們也可能需要在某個(gè)時(shí)刻改變其內(nèi)容；或者我們?yōu)樗鼫?zhǔn)備了一款尺寸略有差異的回退字體，而不同字體對(duì)相同內(nèi)容的渲染結(jié)果很可能是不同的。在這個(gè)案例中，我們通常期望達(dá)到這個(gè)效果：如果它的寬高相等，就顯示為一個(gè)圓；如果寬高不等，就顯示為一個(gè)橢圓。可是，我們前面的代碼并不能滿足這個(gè)期望。當(dāng)寬度大于高度時(shí)，我們得到的形狀如圖1.2所示。那我們到底能不能用 border-radius 來產(chǎn)生一個(gè)橢圓，甚至是一個(gè)自適應(yīng)的橢圓呢？

圖1.2在前面的圓形示例中，當(dāng)高度小于寬度時(shí)發(fā)生的情況；border-radius 所產(chǎn)生的圓形用虛線標(biāo)示。

解決方案：

說到 border-radius，有一個(gè)鮮為人知的真相：它可以單獨(dú)指定水平和垂直半徑，只要用一個(gè)斜杠（/）分隔這兩個(gè)值即可。這個(gè)特性允許我們?cè)诠战翘巹?chuàng)建橢圓圓角（參見圖1.3）。因此，如果我們有一個(gè)尺寸為 200px×150px 的元素，就可以把它圓角的兩個(gè)半徑值分別指定為元素寬高的一半，從而得到一個(gè)精確的橢圓：

圖1.3一個(gè)容器設(shè)置了不相等的水平和垂直 border-radius；拐角處的弧線現(xiàn)在呈現(xiàn)出橢圓的形狀，這個(gè)橢圓的水平和垂直半徑就是我們?yōu)?border-radius 指定的值，在圖中用虛線標(biāo)示。

圖1.4通過非對(duì)稱的 border-radius 曲線來創(chuàng)建一個(gè)橢圓。

我們可以在圖1.4中看到結(jié)果。但是，這段代碼存在一個(gè)很大的缺陷：只要元素的尺寸發(fā)生變化，border-radius 的值就得跟著改。我們?cè)趫D3-5中可以看到，當(dāng)元素的尺寸變?yōu)?200px×300px 時(shí)，如果 border-radius 沒有跟著改變，會(huì)發(fā)生什么后果。因此，如果我們的元素尺寸會(huì)隨著它的內(nèi)容變化而變化，這就是一個(gè)問題了。難道我們真的走投無路了嗎？其實(shí)，border-radius 這個(gè)屬性還有另外一個(gè)鮮為人知的真相，它不僅可以接受長(zhǎng)度值，還可以接受百分比值。這個(gè)百分比值會(huì)基于元素的尺寸進(jìn)行解析，即寬度用于水平半徑的解析，而高度用于垂直半徑的解析。這意味著相同的百分比可能會(huì)計(jì)算出不同的水平和垂直半徑。因此，如果要?jiǎng)?chuàng)建一個(gè)自適應(yīng)的橢圓，我們可以把這兩個(gè)半徑值都設(shè)置為50%：

由于斜杠前后的兩個(gè)值現(xiàn)在是一致的（即使它們最終可能會(huì)被計(jì)算為不同的值），我們可以把這行代碼進(jìn)一步簡(jiǎn)化為：

最終，只需要這一行代碼，我們就可以得到一個(gè)自適應(yīng)的橢圓了。

擴(kuò)展：border-radius 的簡(jiǎn)寫方式

延伸一句代碼半橢圓：border-radius: 100% 0 0 100%/50%;即可形成如圖1.5所示的半橢圓

圖1.5

延伸一句代碼實(shí)現(xiàn)1/4橢圓：border-radius: 100% 0 0 0; 即可形成如圖1.6所示的1/4橢圓

圖1.6

小花絮：

為什么叫 border-radius？可能有人會(huì)奇怪，border-radius 到底由何得名。這個(gè)屬性并不需要邊框來參與工作，似乎把它叫作 corner-radius 更貼切一些。這個(gè)名字乍聽起來確實(shí)讓人摸不著頭腦，其實(shí)原因在于 border-radius 是對(duì)元素 borderbox 進(jìn)行切圓角處理的。當(dāng)元素沒有邊框時(shí)，可能還看不出差異；當(dāng)它有邊框時(shí)，則以邊框外側(cè)的拐角作為切圓角的基準(zhǔn)。邊框內(nèi)側(cè)的圓角會(huì)稍小一些（嚴(yán)格來說內(nèi)角半徑將是 max(0,border-radius-border-width)）。

海說軟件會(huì)持續(xù)推出前端教學(xué)課程、技術(shù)干貨。

-END-