前面系統(tǒng)總結(jié)了CSS3中Gradient和RGBA的用法，今天我們?cè)谝黄饋砜纯碈SS3中制作圓角的屬性border-radius的具體用法。在CSS2中，大家都碰到過圓角的制作。當(dāng)時(shí)，對(duì)于圓角的制作，我們都需要使用多張圓角圖片做為背景，分別應(yīng)用到每個(gè)角上，我應(yīng)用最多的就是在需要圓角的元素標(biāo)簽中加四個(gè)空標(biāo)簽，然后在每個(gè)空標(biāo)簽中應(yīng)用一個(gè)圓角的背景位置，然后在對(duì)這幾個(gè)應(yīng)用了圓角的標(biāo)簽進(jìn)行定位到相應(yīng)的位置，具體實(shí)現(xiàn)過程我就不在多講，只看方法就知道煩死人。

如今CSS3中的border-radius出現(xiàn)后，讓我們沒有那么多的煩惱了，首先制作圓角圖片的時(shí)間是省了，而且其還有多個(gè)優(yōu)點(diǎn)：其一減少網(wǎng)站的維護(hù)的工作量，少了對(duì)圖片的更新制作，代碼的替換等等;其二、提高網(wǎng)站的性能，少了對(duì)圖片進(jìn)行http的請(qǐng)求，網(wǎng)頁的載入速度將變快；其三增加視覺美觀性。既然border-radius有這么多好處，我們就從他的語法，屬性和屬性值等方面來看其如何應(yīng)用，又是如何制作圓角，還有就是除了制作圓角他還能制作什么？有這么多，那我們就開始吧：

一、語法：

<length>： 由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長度值。不可為負(fù)值。

三、說明：

border-radius是一種縮寫方法。如果“/”前后的值都存在，那么“/”前面的值設(shè)置其水平半徑，“/”后面值設(shè)置其垂直半徑。如果沒有“/”，則水平和垂直半徑相等。另外其四個(gè)值是按照top-left、top-right、bottom-right、bottom-left的順序來設(shè)置的其主要會(huì)有下面幾種情形出現(xiàn)：

1、border-radius: [ <length>{1,4} ]; //這里只有一個(gè)值，那么top-left、top-right、bottom-right、bottom-left四個(gè)值相等

2、border-radius:[ <length>{1,4} ]  [ <length>{1,4} ] ; //這里設(shè)置兩個(gè)值，那么top-left等于bottom-right，并且取第一個(gè)值；top-right等于bottom-left，并且取第二個(gè)值

3、border-radius:[ <length>{1,4} ]   [ <length>{1,4} ]   [ <length>{1,4} ];//如果有三個(gè)值，其中第一個(gè)值是設(shè)置top-left;而第二個(gè)值是top-right和bottom-left并且他們會(huì)相等,第三個(gè)值是設(shè)置bottom-right

4、border-radius:[ <length>{1,4} ]   [ <length>{1,4} ]  [ <length>{1,4} ]   [ <length>{1,4} ];//如果有四個(gè)值，其中第一個(gè)值是設(shè)置top-left;而第二個(gè)值是top-right,第三個(gè)值bottom-right,第四個(gè)值是設(shè)置bottom-left

前面，我們主要看了border-radius的縮寫格式，其實(shí)border-radius和border屬性一樣，還可以把各個(gè)角單獨(dú)拆分出來，也就是以下四種寫法，這里我規(guī)納一點(diǎn)，他們都是先Y軸在X軸，具體看下面：