背景知識：

創(chuàng)新互聯(lián)建站專業(yè)為企業(yè)提供于田網(wǎng)站建設(shè)、于田做網(wǎng)站、于田網(wǎng)站設(shè)計、于田網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、于田企業(yè)網(wǎng)站模板建站服務(wù)，10年于田做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

border-radius 屬性的基本用法。

難題：

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

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

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

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

不過，我們往往不愿意對一個元素指定固定的寬度和高度，因為我們希望它能根據(jù)其內(nèi)容自動調(diào)整并適應(yīng)，而內(nèi)容的長短不可能在事先就知道。即使是在設(shè)計一個靜態(tài)網(wǎng)站的時候（元素的內(nèi)容可以預(yù)先確定），我們也可能需要在某個時刻改變其內(nèi)容；或者我們?yōu)樗鼫蕚淞艘豢畛叽缏杂胁町惖幕赝俗煮w，而不同字體對相同內(nèi)容的渲染結(jié)果很可能是不同的。在這個案例中，我們通常期望達到這個效果：如果它的寬高相等，就顯示為一個圓；如果寬高不等，就顯示為一個橢圓?？墒?，我們前面的代碼并不能滿足這個期望。當寬度大于高度時，我們得到的形狀如圖1.2所示。那我們到底能不能用 border-radius 來產(chǎn)生一個橢圓，甚至是一個自適應(yīng)的橢圓呢？

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

解決方案：

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

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

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

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

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

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

擴展：border-radius 的簡寫方式

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

圖1.5

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

圖1.6

小花絮：

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

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

-END-

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)站題目：前端知識|CSS小技巧-自適應(yīng)橢圓-創(chuàng)新互聯(lián)
轉(zhuǎn)載源于：http://weahome.cn/article/dsppej.html