CSS3圓角

注意：由于CSS3中的部分內(nèi)容尚未完全定稿，所以本文的部分可能會(huì)隨時(shí)更新。

CSS Level3中正式開(kāi)始支持圓角屬性，官方給出的文檔在這里。本篇文章將會(huì)介紹CSS3中border-radius的相關(guān)知識(shí)和用法。

在CSS3支持圓角之前，我們要想實(shí)現(xiàn)圓角效果，得用多張圖片進(jìn)行定位，經(jīng)過(guò)一系列精細(xì)的調(diào)試才能得到想要的效果。這種方法也是無(wú)奈之舉，而且很麻煩，同時(shí)它具有幾個(gè)不可避免的弊端，

• 增加了頁(yè)面文件及靜態(tài)資源的維護(hù)成本
• 增加了額外的網(wǎng)絡(luò)帶寬消耗（因?yàn)樾枰虞d更多的圖片）

現(xiàn)在直接對(duì)元素設(shè)置border-radius屬性即可達(dá)到圓角的效果。其語(yǔ)法如下，

border-radius: <length>{1-4} | % / <length>{1-4} | %;

即，可以設(shè)置

1. 1～4長(zhǎng)度值
2. 一個(gè)百分比
3. 可以設(shè)置兩組值，使用／連接

比如，我有如下的代碼，

<style>
    #border-radius {
        width: 200px;
        height: 200px;
        border: 1px solid;
        background-color: #0a0;
        border-radius: 20px;
    }
</style>
<div id="border-radius"></div>

其效果如下，

上述的代碼中，我只給border-radius屬性設(shè)置了一個(gè)值。其實(shí)border-radius跟border屬性時(shí)很相似的，它是一個(gè)復(fù)合屬性，可分為左上、右上、左下、右下共四個(gè)可賦值項(xiàng)。前面說(shuō)過(guò)，border-radius可以賦值1～4個(gè)值，

• 設(shè)置1個(gè)值時(shí)，四個(gè)方向都使用同一個(gè)值
• 設(shè)置2個(gè)值時(shí)，左上和右下使用第一個(gè)值，右上和左下使用第二個(gè)值
• 設(shè)置3個(gè)值時(shí)，左上使用第一個(gè)值，右上和左下使用第二個(gè)值，右下使用第三個(gè)值
• 設(shè)置4個(gè)值時(shí)，分別對(duì)應(yīng)左上、右上、左下、右下的順序進(jìn)行賦值

除了直接設(shè)置1～4個(gè)長(zhǎng)度單位之外，我們還可以設(shè)置百分比（％），比如

#border-radius {
    width: 200px;
    height: 200px;
    background-color: #0a0;
    border: 1px solid;
    border-radius: 10% 20% 50%;
}

其效果如下，

其實(shí)border-radius屬性意為邊框半徑，它分為水平半徑和垂直半徑，如下圖

我們?cè)谠O(shè)置border-radius時(shí)其實(shí)還可以使用形如下面示例的賦值方式，

#border-radius {
    width: 200px;
    height: 200px;
    background-color: #0a0;
    border: 1px solid;
    border-radius: 10px 50px 15px 50px/5px 20px 10px 20px;
}

其效果如下，

我們可以給水平或者垂直半徑分別進(jìn)行賦值。所以，我們可以給不同方向設(shè)置圓角，同時(shí)還可以分別設(shè)置其水平或者垂直半徑來(lái)達(dá)到不同曲率的圓角。

當(dāng)我們使用／設(shè)置圓角時(shí)，第一組屬性為水平半徑的賦值，第二組值為垂直半徑賦值。且賦值的方向規(guī)律與前述一致。

除此之外，CSS3還支持對(duì)元素的某個(gè)角進(jìn)行賦值，

• border-top-left-radius，左上角
• border-top-right-radius，右上角
• border-bottom-right-radius，右下角
• border-bottom-left-radius，左下角

這四個(gè)屬性都可以設(shè)置1～2個(gè)值，如下

.test {
    border-top-left-radius: 10px 20px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

1. 
   
2. 若設(shè)置一個(gè)值，則表示水平半徑和垂直半徑相同
3. 若設(shè)置兩個(gè)值，則表示分別按順序設(shè)置水平、垂直半徑

兼容性：雖然目前各大主流現(xiàn)代瀏覽器都支持border-radius屬性，不過(guò)在具體的實(shí)現(xiàn)細(xì)節(jié)上可能會(huì)有所差別，針對(duì)不同的瀏覽器需要添加各自的瀏覽器兼容前綴。

參考列表

• http://www.w3.org/TR/css3-background
• CSS3圓角詳解