前面系統總結了CSS3中Gradient和RGBA的用法，今天我們在一起來看看CSS3中制作圓角的屬性border-radius的具體用法。在CSS2中，大家都碰到過圓角的制作。當時，對于圓角的制作，我們都需要使用多張圓角圖片做為背景，分別應用到每個角上，我應用最多的就是在需要圓角的元素標簽中加四個空標簽，然后在每個空標簽中應用一個圓角的背景位置，然后在對這幾個應用了圓角的標簽進行定位到相應的位置，具體實現過程我就不在多講，只看方法就知道煩死人。

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

一、語法：

復制代碼代碼如下:
border-radius ： none | <length>{1,4} [/ <length>{1,4} ]?

二、取值：

<length>： 由浮點數字和單位標識符組成的長度值。不可為負值。

三、說明：

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

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

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

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

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

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