CSS3里border邊框?qū)傩宰隽舜蠓鶖U(kuò)展，廣受歡迎的就是border-image和border-radius。本篇就介紹一下border-radius。

顧名思義就是給邊框加上圓角效果。先看一下基本語法。例如border-radius: 100px 25px 50px 50px / 50px 25px 50px 25px;

/斜杠前是水平方向圓角半徑，斜杠后是垂直方向圓角半徑。順序同樣遵守TRBL（Top-Right-Bottom-Left）原則，依此是上右下左的圓角水平半徑 / 上右下左的圓角垂直半徑。一圖勝千言：（將代碼和圖對照著看一下，很容易就能明白）

如果沒有/斜杠，表示圓角的水平和垂直半徑的值相等（注意我這里說的是值相等，而不是相等。如果設(shè)的是px值，那水平和垂直半徑是相等的。但如果設(shè)的是%百分比，那說明水平垂直半徑有相同縮放比例，但不代表縮放后兩個(gè)半徑的px值相等。下面會(huì)有例子說明）。另外同遵守TRBL原則的其他屬性一樣可以簡寫：

1個(gè)值表示4個(gè)角的圓角半徑均一樣，例如border-radius: 10px;

講到這里就已經(jīng)明白了border-radius的繪圖的基本原理了?，F(xiàn)在再深入看一些問題：

• 圓角的內(nèi)徑和外徑
• 圓角邊框過渡
• 圓角的弧度重疊

圓角的內(nèi)徑和外徑

border-radius其實(shí)還分內(nèi)半徑和外半徑。而我們設(shè)的border-radius的值是指外半徑（即width/height+border寬度）。內(nèi)半徑=外半徑減去border寬度。因此當(dāng)border-radius的值小于或等于border的寬度時(shí)，邊框內(nèi)部將不具有圓角效果。

.border-radius {
    width:150px;
    height: 80px;
    border: 30px solid red;
    border-radius:30px  //外半徑等于border的寬度
}
<div class="border-radius"></div>

因?yàn)橥獍霃胶蚥order的寬度都是30px，所以內(nèi)半徑等于0。內(nèi)半徑值小于等于0的話，將被無視（半徑小于等于0的圓不就是黑洞么），仍舊正常顯示直角。只有當(dāng)border-radius值大于邊框?qū)挾葧r(shí)，邊框內(nèi)部才會(huì)出現(xiàn)圓角效果：

.border-radius {
    width:150px;
    height: 80px;
    border: 30px solid red;
    border-radius: 40px;    //圓角外半徑40px，內(nèi)半徑40-30=10px
}
<div class="border-radius"></div>

圓角邊框過渡

當(dāng)相鄰兩邊框?qū)挾炔煌瑫r(shí)，圓角會(huì)從寬的一邊平滑過渡到窄的一邊。先看看邊框?qū)挾认嗟鹊那闆r，所謂一圖勝千言：

.radius {
    border: 10px solid red;
    width: 180px;
    height: 80px;
    border-color: red green blue yellow;
    border-radius: 60px;
}
<div class="radius "></div>

邊框交接中心點(diǎn)是在兩邊寬度成正比的角度上。如果兩邊寬度一樣，那臨界點(diǎn)就是如上圖所示的45度角?，F(xiàn)在將4條變改成不等寬，所謂一圖勝千言：

.radius {
    border: 10px solid red;
    width: 180px;
    height: 80px;
    border-width: 20px 40px 5px 30px;
    border-color: red green blue yellow;
    border-radius: 60px;
}
<div class="radius "></div>

同理邊框交接中心點(diǎn)是在兩邊寬度成正比的角度上。如上邊框20px，右邊框40px，比例1:2，因此右上角邊框交接中心點(diǎn)是在30度角。其他3點(diǎn)同類類推。

圓角的弧度重疊

手機(jī)上APP圖標(biāo)如果是一張長寬相等的正方形圖片，無論你圖片再好看，有棱有角的樣子總不太招人喜歡。試試改成圓角border-radius: 10%;

這個(gè)例子的重點(diǎn)是：4個(gè)圓角弧線無任何重疊。

微博頭像是圓形的。如想將將一張正方形頭像圖片改成圓形的話，需要水平和垂直半徑相同（即不能有/斜杠），半徑為50%。即等同于在正方形中心為圓點(diǎn)畫了個(gè)圓。border-radius: 50%;

現(xiàn)在讓圓角弧線超過臨界點(diǎn)讓其重疊，如改成100%。你可以試一下，效果和50%一樣，仍舊是個(gè)完美的圓。為什么呢？參照W3C的說法，當(dāng)相鄰兩個(gè)圓角半徑之和超過border box的大小，會(huì)導(dǎo)致兩個(gè)圓角部分重疊。為了避免這種重疊，瀏覽器會(huì)做出調(diào)整，按圓角的水平和垂直半徑的比例進(jìn)行縮小。

當(dāng)border-radius: 100%;設(shè)成單值時(shí)，圓角的水平和垂直的半徑均為100%，比例是1:1。相鄰圓角的半徑之和等于2倍border box的直徑，會(huì)出現(xiàn)重疊。因此瀏覽器會(huì)按1:1比例縮小到不重疊的臨界點(diǎn)50%為止。因此對正方形來說，單值的border-radius超過50%或大于超過正方形半徑的px值時(shí)，仍舊是個(gè)完美的圓。

這里仍舊要啰嗦一句，比例1:1，是指圓角的水平和垂直的半徑的比例，而非border box的寬高比例。例如border-radius: 50% / 100%;效果是這樣的：

正方形理解起來相對容易，挑戰(zhàn)一下長方形：

.radius {
    border: 10px solid red;
    width: 180px;
    height: 80px;
    border-radius: 100%;
}
<div class="radius "></div>

同理不重疊的臨界值是50%，因此border-radius: 100%;的效果等價(jià)于border-radius: 50%;是一個(gè)標(biāo)準(zhǔn)的橢圓

最開始就說了，如果沒有/斜杠，表示圓角的水平和垂直半徑的值相等（注意是值相等，而不是相等）。如border-radius:10px表示水平半徑等于垂直半徑等于10px。但當(dāng)border-radius不是px值而是%百分比時(shí)，表示水平半徑等于垂直半徑等于同一個(gè)百分比，但不等于縮放后它們的px值相同。此例中border-radius: 50%;等價(jià)于border-radius: 50% / 50%;等價(jià)于border-radius: 100px / 50px;（這點(diǎn)我當(dāng)初暈了好一陣）

因此代碼改成border-radius: 400px;時(shí)，成了個(gè)400米操場跑道，和設(shè)成100%的標(biāo)準(zhǔn)橢圓差很遠(yuǎn)。

那要將400米跑道改成標(biāo)準(zhǔn)橢圓怎么辦？一個(gè)方法是不要用px值，而是用百分比，只要百分比超過50%即可。另一個(gè)方法是將水平和垂直半徑的px值保持相應(yīng)的比例。如border-radius: 400px / 200px;效果等價(jià)于border-radius: 100px / 50px;

總結(jié)

關(guān)于border-radius的內(nèi)容我所知道的就這些。如有錯(cuò)誤麻煩指出，不勝感謝。因?yàn)槭荂SS3的屬性，兼容性問題請自行參照Can I Use。各種案例，如畫個(gè)橢圓畫個(gè)扇形等，網(wǎng)上都有現(xiàn)成的案例，就不啰嗦了。知道原理后再將網(wǎng)上案例中的代碼修改為自己需要的效果就容易多了。最后用border-radius隨手畫了個(gè)五環(huán)見笑見笑。