Flexible ellipses

顧名思義，靈活的橢圓。
橢圓，是我們今天的主角。
拿它用來做什么呢？??，對了，拿它做圓角。

border-radius,這是個(gè) 簡單，實(shí)用的屬性，我們先對它進(jìn)行一個(gè)小小的回顧.

border-radius :
用來設(shè)置邊框圓角。當(dāng)使用一個(gè)半徑時(shí)確定一個(gè)圓形；當(dāng)使用兩個(gè)半徑時(shí)確定一個(gè)橢圓，這個(gè)(橢)圓與邊框的交集形成圓角效果。

border-radius.png

即使元素沒有邊框，圓角也可以用到 background
上面，具體效果受 background-clip
影響。

這是一個(gè)簡寫屬性，用來設(shè)置
border-top-left-radius
,
border-top-right-radius
,
border-bottom-right-radius
，
border-bottom-left-radius
。

和其他簡寫屬性類似，無法為個(gè)別值設(shè)定為繼承，如 border-radius:0 0 inherit inherit，這會(huì)覆蓋一部分現(xiàn)有定義。在這種情況下只能使用完整屬性來指定。

用法

Formal syntax: <length> | <percentage> []{1,4} / <length> | <percentage> []{1,4} []?

半徑的第一個(gè)語法取值可取1~4個(gè)值:
border-radius: radius
border-radius: top-left-and-bottom-right top-right-and-bottom-left
border-radius: top-left top-right-and-bottom-left bottom-right
border-radius: top-left top-right bottom-right bottom-left

半徑的第二個(gè)語法取值也可取1~4個(gè)值 :
border-radius: (first radius values) / radius

border-radius: (first radius values) / top-left-and-bottom-right top-right-and-bottom-left

border-radius: (first radius values) / top-left top-right-and-bottom-left bottom-right

border-radius: (first radius values) / top-left top-right bottom-right bottom-left

border-radius: inherit；

屬性值

radius 屬性

進(jìn)入正題，先畫個(gè)圓壓壓驚：

<pre>
background: #fb3;
width: 200px;height: 200px;
border-radius: 100px;
</pre>

??

border-radius: 100px;

你或許已經(jīng)發(fā)現(xiàn)了，這里設(shè)置的值，只要大于等于邊的一半就可以了，但到底是為什么呢？

我們看官網(wǎng)的一段描述：

“When the sum of any two adjacent border radii exceeds the size of theborder box, user agents must proportionally reduce the used values of allborder radii until none of them overlap.”
—CSSBackgrounds & Borders Level 3

這段話的意思是，如果相鄰的border-radius 值的和超過了border-box 的范圍, 那么 用戶代理就會(huì)相應(yīng)的減小所有的border-radius 的值，直到它們中的任何一個(gè)都不發(fā)生重疊。

通常情況下，我們不會(huì)給一個(gè)元素固定的寬高，因?yàn)槲覀兿敫鶕?jù)內(nèi)容去自適應(yīng)，最終的尺寸我們是不知道的。即使我們要做的是一個(gè)靜態(tài)網(wǎng)站，并且內(nèi)容是固定的，這樣我們可以確定它的尺寸。即使以后某一天，我們想進(jìn)行一些修改，也可以修改字號(hào)來實(shí)現(xiàn)同樣的尺寸。

在之前的例子中，我們畫了一個(gè)圓，但是如果寬度變大一些，比如150px,那就變成了膠囊了。

所以，在寬高不一致的情況下，我們可以把角做成一個(gè)橢圓。

<pre>
border-radius: 100px / 75px;
</pre>

border-radius 接受 橫向和垂直兩個(gè)方向的參數(shù)，可以用 斜線（/）去分開。

<pre>
width:200px;
height:150px;
border-radius: 100px / 75px;
</pre>

這里還有一個(gè)明顯的問題，我們使用了固定的數(shù)值，當(dāng)內(nèi)容改變導(dǎo)致容器尺寸改變時(shí)，我們希望border-radius也相應(yīng)變化。

border-radius 接受百分?jǐn)?shù)，不僅僅是具體的值。
所以，我們可以把上面的代碼改寫為：

<pre>
width:200px;
height:150px;
border-radius:50% / 50% ;
</pre>

因?yàn)?分割線左邊和 右邊的半分?jǐn)?shù)是一樣的，所以也能合并起來：

<pre>
border-radius:50% ;
</pre>

現(xiàn)在我們已經(jīng)知道怎么畫一個(gè)橢圓了，那我們能不能畫出半個(gè)橢圓呢 ？

這必須是當(dāng)然的 ??。

橢圓有兩個(gè)軸 x,y 軸，四個(gè)角。
分別是：

border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

給它們賦予不同的值就可以實(shí)現(xiàn)很多奇妙的圖形。

半個(gè)矩形

以這個(gè)圖形為例：
它是水平對稱的，所以它的
top-left-radius 和 bottom-left-radius 應(yīng)該是一樣的，

top-right-raidus 和bottom-right-radius 也應(yīng)該是一樣的：

代碼：

<pre>
width: 8em;
height: 8em;
background-color: #fb3;
border-top-left-radius: 100% 50%;
border-top-right-radius: 0px 50%;
border-bottom-right-radius: 0px 50%;
border-bottom-left-radius: 100% 50%;
</pre>

可以簡寫為：

<pre>
border-radius: 100% 0 0 100% / 50%;
</pre>

知道這個(gè)，就讓我們愉快的玩耍吧：

我們可以這樣：

氣泡

<pre>
border-radius: 100% 100% 100% 0 / 100% 100% 100% 0;
</pre>
可以這樣：

切糕

<pre>
border-radius: 100% 0 0 0;
</pre>

這樣：

芒果

<pre>
border-radius: 100% 0 / 50% 0;
</pre>
也可以這樣：

蝴蝶

或者也可以放大招：

糖果按鈕

這是設(shè)計(jì)師 simurai設(shè)計(jì)的，很好玩吧，為了方便訪問，我把它拿了下來，戳這里查看。
這是他在css conf 上的一個(gè)演講，Styling with STRINGS ，挺有趣的，有興趣的同學(xué)可以看一下。

結(jié)尾

//每次結(jié)尾都不知道說什么 ＝ ＝
border-radius 還有很多有趣的用法，就不多說了。
最后，感謝閱讀，歡迎交流，文中若有表述不準(zhǔn)確的地方，也歡迎大力指正，就先到這，本篇結(jié)束。