背景知識：

10余年的坡頭網(wǎng)站建設(shè)經(jīng)驗，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。網(wǎng)絡(luò)營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整坡頭建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗。成都創(chuàng)新互聯(lián)從事“坡頭網(wǎng)站設(shè)計”,“坡頭網(wǎng)站推廣”以來，每個客戶項目都認真落實執(zhí)行。

border-radius 屬性的基本用法。

難題：

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

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

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

“當(dāng)任意兩個相鄰圓角的半徑之和超過 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é)果很可能是不同的。在這個案例中，我們通常期望達到這個效果：如果它的寬高相等，就顯示為一個圓；如果寬高不等，就顯示為一個橢圓?？墒?，我們前面的代碼并不能滿足這個期望。當(dāng)寬度大于高度時，我們得到的形狀如圖1.2所示。那我們到底能不能用 border-radius 來產(chǎn)生一個橢圓，甚至是一個自適應(yīng)的橢圓呢？

圖1.2在前面的圓形示例中，當(dāng)高度小于寬度時發(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中可以看到，當(dāng)元素的尺寸變?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 進行切圓角處理的。當(dāng)元素沒有邊框時，可能還看不出差異；當(dāng)它有邊框時，則以邊框外側(cè)的拐角作為切圓角的基準。邊框內(nèi)側(cè)的圓角會稍小一些（嚴格來說內(nèi)角半徑將是 max(0,border-radius-border-width)）。

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

-END-