背景知識：css
border-radius 屬性的基本用法。css3
難題：app
你可能注意到過，給任何正方形元素設置一個足夠大的 border-radius，就能夠把它變成一個圓形。所用到的 CSS 代碼以下所示： ide
圖1.1給元素設置固定寬高以及一半長度的 border-radius，能夠獲得一個圓形字體
你可能還注意到了，若是指定任何大於 100px 的半徑，仍然能夠獲得一個圓形。規範特別指出了這其中的緣由：網站
「當任意兩個相鄰圓角的半徑之和超過 borderbox 的尺寸時，用戶代理必須按比例減少各個邊框半徑所使用的值，直到它們不會相互重疊爲止。」——CSS 背景與邊框（第三版）（http://w3.org/TR/css3-background/#corner-overlap）spa
不過，咱們每每不肯意對一個元素指定固定的寬度和高度，由於咱們但願它能根據其內容自動調整並適應，而內容的長短不可能在事先就知道。即便是在設計一個靜態網站的時候（元素的內容能夠預先肯定），咱們也可能須要在某個時刻改變其內容；或者咱們爲它準備了一款尺寸略有差別的回退字體，而不一樣字體對相同內容的渲染結果極可能是不一樣的。在這個案例中，咱們一般指望達到這個效果：若是它的寬高相等，就顯示爲一個圓；若是寬高不等，就顯示爲一個橢圓。但是，咱們前面的代碼並不能知足這個指望。當寬度大於高度時，咱們獲得的形狀如圖1.2所示。那咱們到底能不能用 border-radius 來產生一個橢圓，甚至是一個自適應的橢圓呢？設計
圖1.2在前面的圓形示例中，當高度小於寬度時發生的狀況；border-radius 所產生的圓形用虛線標示。代理
解決方案：blog
說到 border-radius，有一個不爲人知的真相：它能夠單獨指定水平和垂直半徑，只要用一個斜槓（/）分隔這兩個值便可。這個特性容許咱們在拐角處建立橢圓圓角（參見圖1.3）。所以，若是咱們有一個尺寸爲 200px×150px 的元素，就能夠把它圓角的兩個半徑值分別指定爲元素寬高的一半，從而獲得一個精確的橢圓：
圖1.3一個容器設置了不相等的水平和垂直 border-radius；拐角處的弧線如今呈現出橢圓的形狀，這個橢圓的水平和垂直半徑就是咱們爲 border-radius 指定的值，在圖中用虛線標示。
圖1.4經過非對稱的 border-radius 曲線來建立一個橢圓。
咱們能夠在圖1.4中看到結果。可是，這段代碼存在一個很大的缺陷：只要元素的尺寸發生變化，border-radius 的值就得跟着改。咱們在圖3-5中能夠看到，當元素的尺寸變爲 200px×300px 時，若是 border-radius 沒有跟着改變，會發生什麼後果。所以，若是咱們的元素尺寸會隨着它的內容變化而變化，這就是一個問題了。難道咱們真的走投無路了嗎？其實，border-radius 這個屬性還有另一個不爲人知的真相，它不只能夠接受長度值，還能夠接受百分比值。這個百分比值會基於元素的尺寸進行解析，即寬度用於水平半徑的解析，而高度用於垂直半徑的解析。這意味着相同的百分比可能會計算出不一樣的水平和垂直半徑。所以，若是要建立一個自適應的橢圓，咱們能夠把這兩個半徑值都設置爲50%：
因爲斜槓先後的兩個值如今是一致的（即便它們最終可能會被計算爲不一樣的值），咱們能夠把這行代碼進一步簡化爲：
最終，只須要這一行代碼，咱們就能夠獲得一個自適應的橢圓了。
擴展：border-radius 的簡寫方式
延伸一句代碼半橢圓：border-radius: 100% 0 0 100%/50%;便可造成如圖1.5所示的半橢圓
圖1.5
延伸一句代碼實現1/4橢圓：border-radius: 100% 0 0 0; 便可造成如圖1.6所示的1/4橢圓
圖1.6
小花絮：
爲何叫 border-radius？可能有人會奇怪，border-radius 到底由何得名。這個屬性並不須要邊框來參與工做，彷佛把它叫做 corner-radius 更貼切一些。這個名字乍聽起來確實讓人摸不着頭腦，其實緣由在於 border-radius 是對元素 borderbox 進行切圓角處理的。當元素沒有邊框時，可能還看不出差別；當它有邊框時，則以邊框外側的拐角做爲切圓角的基準。邊框內側的圓角會稍小一些（嚴格來講內角半徑將是 max(0,border-radius-border-width)）。