CSS3圓角border-radius屬性詳解

CSS即層疊樣式表(Cascading StyleSheet)，css3是css的最新版本，新增加了很多特性，如：css3動畫 animation、Transform、Transition，CSS3漸變，CSS3圓角，文字特效，css3 Flexbox(伸縮盒佈局)等等。回顧我們寫邊框圓角歷程，最開始我們用4漲小圖片（左上角，右上角，左下角，右下角）來實現邊框圓角，後來進化到2漲背景圖片（上，下），後來進化到1漲圖片(css sprite)實現圓角，最後到現在CSS3 border-radius屬性的出現，我們完全可以拋棄背景圖片了，達到0圖片實現邊框圓角，並且不用增加額外的元素節點，也不會因爲圓角圖片而有額外的HTTP請求。

border-radius屬性詳解

單個圓角語法：

border-*-*-radius: [ <length> | <%> ] [ <length> | <%> ]？

列子：

border-top-left-radius: 10px 5px;
border-bottom-right-radius: 10% 5%;
border-top-right-radius: 10pt;

單個圓角語法詳情：

名稱：	border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius
取值：	[ <length> | <%> ]{1,2}
初始：	0
適用於：	所有元素
繼承：	否
百分比：	相對於邊框盒子相應的邊.詳情看下面說明
計算值：	兩個絕對 <length> 或百分比值

說明：border-*-*-radius 屬性的兩個值決定了作爲邊框外邊形狀的四分之一橢圓的半徑（請看下圖）。第1個取值是水平半徑，第2個值是垂直半徑。若沒有第2個取值，從第1個復製過來。若其中1個長度爲零，則角是垂直的，不是圓角。作爲水平半徑的百分比值，取值相對於邊框盒的寬度，作為垂直半徑的百分比值，取值相對於邊框盒的高度。

如果把一個div方框的水平半徑設置爲55pt，垂直半徑爲25pt，則代碼如下：

 border-top-left-radius:55pt 25pt;
 border-top-right-radius:55pt 25pt;
 border-bottom-right-radius:55pt 25pt;
 border-bottom-left-radius:55pt 25pt;

上面講的是CSS3圓角邊框的單個角寫法，4個圓角我們需要寫4個屬性，其實還有簡寫(縮寫)方式，css3圓角簡寫方式只用寫一個屬性： border-radius(邊框半徑)即可達到上面講的4個圓角效果，

CSS3簡寫（縮寫）語法如下：

border-radius：[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

列子：

border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;
border-radius: 5px;
border-radius: 5px 10px / 10px;

CSS3簡寫（縮寫）語法詳情：

名稱：	border-radius
取值：	[ <length> | <%> ]{1,4} [ / [ <length> | <%> ]{1,4} ]?
初始：	詳細請看下面說明
適用於：	所有元素
計算值：	詳細請看下面說明
百分比：	相對於邊框盒子相應的邊.

說明：border-radius簡寫可以用來設定四個屬性 border-*-radius。若指定的值包含斜線，則斜線前面的取值會設定水平半徑，斜線後面的取值會設定垂直半徑，若沒有斜線，則取值同時用來設定兩個半徑。每個半徑的四個值按照左上、右上、右下、左下的順序，若沒有左下取值則使用右上取值，若沒有右下取值則使用左上取值，若沒有右上取值則使用左上取值。

上圖的“把一個div方框的水平半徑設置爲55pt，垂直半徑爲25pt 的列子”4個圓角效果我們可以這樣寫：

border-radius:55pt / 25pt;

簡寫方式可以節省很多代碼，所以實際開發中推薦用簡寫方式。

PS：測試圓角建議把div方框加上邊線或者背景