背景知識(shí)：

border-radius?屬性的基本用法丛晌。

難題：

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

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

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

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

不過(guò)荧恍，我們往往不愿意對(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 來(lái)產(chǎn)生一個(gè)橢圓宋光，甚至是一個(gè)自適應(yīng)的橢圓呢貌矿？

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

解決方案：

說(shuō)到 border-radius，有一個(gè)鮮為人知的真相：它可以單獨(dú)指定水平和垂直半徑菇民，只要用一個(gè)斜杠（/）分隔這兩個(gè)值即可尽楔。這個(gè)特性允許我們?cè)诠战翘巹?chuàng)建橢圓圓角（參見(jiàn)圖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通過(guò)非對(duì)稱的 border-radius 曲線來(lái)創(chuàng)建一個(gè)橢圓。

我們可以在圖1.4中看到結(jié)果客蹋。但是塞蹭，這段代碼存在一個(gè)很大的缺陷：只要元素的尺寸發(fā)生變化，border-radius 的值就得跟著改讶坯。我們?cè)趫D3-5中可以看到番电，當(dāng)元素的尺寸變?yōu)?200px×300px 時(shí)，如果 border-radius 沒(méi)有跟著改變辆琅，會(huì)發(fā)生什么后果漱办。因此，如果我們的元素尺寸會(huì)隨著它的內(nèi)容變化而變化婉烟，這就是一個(gè)問(wèn)題了娩井。難道我們真的走投無(wú)路了嗎？其實(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è)屬性并不需要邊框來(lái)參與工作诵竭，似乎把它叫作 corner-radius 更貼切一些。這個(gè)名字乍聽(tīng)起來(lái)確實(shí)讓人摸不著頭腦兼搏，其實(shí)原因在于 border-radius 是對(duì)元素 borderbox 進(jìn)行切圓角處理的卵慰。當(dāng)元素沒(méi)有邊框時(shí)，可能還看不出差異佛呻；當(dāng)它有邊框時(shí)裳朋，則以邊框外側(cè)的拐角作為切圓角的基準(zhǔn)。邊框內(nèi)側(cè)的圓角會(huì)稍小一些（嚴(yán)格來(lái)說(shuō)內(nèi)角半徑將是 max(0,border-radius-border-width)）吓著。

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

-END-?