《CSS3 入門教程系列》前一篇文章詳細介紹了 CSS3 RGBA 特性的用法，今天這篇文章我們在一起來看看 CSS3 中用於實現圓角效果的 border-radius 屬性的具體用法。
以前製作圓角效果，我們都需要使用多張圓角圖片做爲背景分別應用到每個角上，我應用最多的就是在需要圓角的元素標籤中加四個空標籤，然後在每個空標籤中應用一個圓角的背景位置，然後在對這幾個應用了圓角的標籤進行定位到相應的位置，非常繁瑣。
您可能感興趣的相關文章
現在有了 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、只有一個值，那麼 top-left、top-right、bottom-right、bottom-left 四個值相等。
2、有兩個值，那麼 top-left 等於 bottom-right，並且取第一個值；top-right 等於 bottom-left，並且取第二個值
3、有三個值，其中第一個值是設置top-left;而第二個值是 top-right 和 bottom-left 並且他們會相等,第三個值是設置 bottom-right。
4、有四個值，其中第一個值是設置 top-left 而第二個值是 top-right 第三個值 bottom-right 第四個值是設置 bottom-left。
前面，我們主要看了 border-radius 的縮寫格式，其實 border-radius 和 border 屬性一樣，還可以把各個角單獨拆分出來，也就是以下四種寫法，這裏我規納一點，他們都是先Y軸在X軸，具體看下面：
|
1
2
3
4
|
border-top-left-radius: <length> <length> //左上角border-top-right-radius: <length> <length> //右上角border-bottom-right-radius:<length> <length> //右下角border-bottom-left-radius:<length> <length> //左下角 |
這裏說一下，各角拆分出來取值方式：<length> <length> 中第一個值是圓角水平半徑，第二個值是垂直半徑,如果第二個值省略，那麼其等於第一個值，這時這個角就是一個四分之一的圓角，如果任意一個值爲0，那麼這個角就不是圓角。
border-radius 只有在以下版本的瀏覽器：Firefox4.0+、Safari5.0+、Google Chrome 10.0+、Opera 10.5+、IE9+ 支持 border-radius 標準語法格式，對於老版的瀏覽器，border-radius 需要根據不同的瀏覽器內核添加不同的前綴，比說 Mozilla 內核需要加上“-moz”，而 Webkit 內核需要加上“-webkit”等，那麼我爲了能兼容各大內核的老版瀏覽器，我們看看 border-radius 在不同內核瀏覽器下的書寫格式：
1、Mozilla(Firefox, Flock等瀏覽器)
|
1
2
3
4
|
-moz-border-radius-topleft: //左上角-moz-border-radius-topright: //右上角-moz-border-radius-bottomright: //右下角-moz-border-radius-bottomleft: //左下角 |
等價於：
|
1
|
-moz-border-radius: //簡寫 |
2、WebKit (Safari, Chrome等瀏覽器)
|
1
2
3
4
|
-webkit-border-top-left-radius: //左上角-webkit-border-top-right-radius: //右上角-webkit-border-bottom-right-radius: //右下角-webkit-border-bottom-left-radius: // 左下角 |
等價於：
|
1
|
-webkit-border-radius: //簡寫 |
3、Opera瀏覽器：
|
1
2
3
4
|
border-top-left-radius: //左上角border-top-right-radius: //右上角border-bottom-right-radius: //右下角border-bottom-left-radius: //左下角 |
等價於：
|
1
|
border-radius: //簡寫 |
4、Trident (IE)
IE9 以下版本不支持 border-radius，而且 IE9 沒有私有格式，都是用 border-radius，其寫法和 Opera 是一樣的，這裏就不在重複。
爲了不管是新版還是老版的各種內核瀏覽器都能支持 border-radius 屬性，那麼我們在具體應用中時需要把我們的 border-radius 格式改成：
|
1
2
3
|
-moz-border-radius:
none | <length>{1,4} [/ <length>{1,4}
]?-webkit-border-radius:
none | <length>{1,4} [/ <length>{1,4}
]?border-radius:
none | <length>{1,4} [/ <length>{1,4}
]? |
其拆分開來的格式相應需要加上 -moz 和 -webkit，上面的代碼其實就等價於下面的代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
-moz-border-radius-topleft: <length> <length> //左上角-moz-border-radius-topright: <length> <length> //右上角-moz-border-radius-bottomright: <length> <length> //右下角-moz-border-radius-bottomleft: <length> <length> //左下角-webkit-border-top-left-radius: <length> <length> //左上角-webkit-border-top-right-radius: <length> <length> //右上角-webkit-border-bottom-right-radius: <length> <length> //右下角-webkit-border-bottom-left-radius: <length> <length> // 左下角border-top-left-radius: <length> <length> //左上角border-top-right-radius: <length> <length> //右上角border-bottom-right-radius: <length> <length> //右下角border-bottom-left-radius: <length> <length> //左下角 |
另外需要特別注意的是，border-radius 一定要放置在 -moz-border-radius 和 -webkit-border-radius 後面，（特別聲明：本文中所講實例都只寫了標準語法格式，如果你的版本不是上面所提到的幾個版本，如要正常顯示效果，請更新瀏覽器版本，或者在 border-radius 前面加上相應的內核前綴，在實際應用中最好加上各種版本內核瀏覽器前綴。）
我們初步來看一個實例，HTML代碼：
|
1
|
<div class="demo"></div> |
爲了更好的看出效果，我們給這個demo添加一點樣式：
|
1
2
3
4
5
6
|
.demo { width:
150px; height:
80px; border:
2px solid
#f36; background:
#ccc;} |
注：如無特殊聲明，本文實例所有基本代碼格式如上所示，只在該元素上添加border-radius屬性設置。
|
1
2
3
|
.demo { border-radius:
10px 15px
20px 30px /
20px 30px
10px 15px;} |
這種寫法我們前面有提到過，“/”前是指圓角的水平半徑，而“/”後是指圓角的垂直半徑，他們兩都遵循TRBL（上右下左）的順序原則。爲了能讓大家更清楚理解，我們把上面代碼換成如下：
|
1
2
3
4
5
6
|
.demo { border-top-left-radius:
10px 20px; border-top-right-radius:
15px 30px; border-bottom-right-radius:
20px 10px; border-bottom-left-radius:
30px 15px;} |
不仿看看他們的效果：
三、支持的瀏覽器：
上面我們介紹了border-radius的基本用法，以及在各大瀏覽器下的格式等，下面我們通過實例來介紹其具體的用法：
一：border-radius只有一個取值時，四個角具有相同的圓角設置，其效果是一致的：
|
1
2
3
|
.demo { border-radius:
10px;} |
其等價於：
|
1
2
3
4
5
6
|
.demo{ border-top-left-radius:
10px; border-top-right-radius:
10px; border-bottom-right-radius:
10px; border-bottom-left-radius:
10px;} |
效果：
二：border-radius設置兩個值，此時top-left等於bottom-right並且他們取第一個值；top-right等於bottom-left並且他們取第二個值，也就是說元素 左上角和右下角相同，右上角和左下角相同
|
1
2
3
|
.demo { border-radius:
10px 20px;} |
等價於：
|
1
2
3
4
5
6
|
.demo { border-top-left-radius:
10px; border-bottom-right-radius:
10px; border-top-right-radius:
20px; border-bottom-left-radius:
20px;} |
效果：
三：border-radius設置三個值，此時top-left取第一個值，top-right等於bottom-left並且他們取第二個值，bottom-right取第三個值：
|
1
2
3
|
.demo { border-radius:
10px 20px
30px;} |
等價於：
|
1
2
3
4
5
6
|
.demo { border-top-left-radius:
10px; border-top-right-radius:
20px; border-bottom-left-radius:
20px; border-bottom-right-radius:
30px;} |
效果：
四：border-radius設置四個值，此時top-left取第一個值，top-right取第二個值，bottom-right取第三個值.bottom-left取第四個值：
|
1
2
3
|
.demo { border-radius:10px
20px 30px
40px;} |
等價於：
|
1
2
3
4
5
6
|
.demo { border-top-left-radius:
10px; border-top-right-radius:
20px; border-bottom-right-radius:
30px; border-bottom-left-radius:
40px;} |
效果：
從上面四個實例中我們可以看出border-radius和border取值非常相似，我們border遵循TRBL原則（從上邊右邊下邊左邊分別對應1、2，3，4四個值），只不過border-radius換成了左上角(top-left)對就值1，右上角（top-right）對應值2，右下角(bottom-right)對應值3，左下角(bottom-left)對應值4.
上面四個實例都是水平和垂直半徑相等情況下border-radius的應用，下面我們來看幾個水平和垂直半徑值不一樣的實例：
一、border-radius: 水平 / 垂直：只設置一個水平和一個垂直半徑時，那麼水平半徑分別指定了元素個四個角的水平半徑值，同樣垂直半徑指定了元素的垂直半徑值，此時四個角具有相同的效果，因爲他們具有相同的值：
|
1
2
3
|
.demo { border-radius:
10px / 20px;} |
等價於：
|
1
2
3
4
5
6
|
.demo { border-top-left-radius:
10px 20px; border-top-right-radius:
10px 20px; border-bottom-right-radius:
10px 20px; border-bottom-left-radius:
10px 20px;} |
效果：
此時我們每個角不在是四分之一圓了，前面我們也說過，只有水平和垂直半徑值相同時，他們才具有四分之一圓特性，這樣一來，我們可以改變不同的半徑值，製作一些特殊的圖形效果，感興趣的朋友可以自己在本地嘗試一下各種不同的設置方式。
二、border-radius: 水平1 水平2 / 垂直1 垂直2：設置了兩個水平值和兩個垂直值，此時我們top-left和bottom-right具有相同的水平和垂直半徑，也就是其中的水平1和垂直1；而 top-right和bottom-left也具有相同的水平和垂直半徑值，也就是水平2和垂直2，我們他拆分出來就是：
|
1
2
3
4
|
border-top-left-radius: 水平1
垂直1；border-bottom-right-radius: 水平1
垂直1；border-top-right-radius: 水平2
垂直2；border-bottom-left-radius: 水平2
垂直2; |
具體我們來看下面的實例：
|
1
2
3
|
.demo { border-radius:
10px 20px
/ 20px 10px;}<em id="__mceDel"
style="font-family: verdana, Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5;"> </em> |
等價於：
|
1
2
3
4
5
6
|
.demo { border-top-left-radius:
10px 20px; border-bottom-right-radius:
10px 20px; border-top-right-radius:
20px 10px; border-bottom-left-radius:
20px 10px;} |
效果：
上面兩種都是相互對應的取值，我們來看一個實例，水平有三個取值，而 垂直只有兩個取值：
|
1
2
3
|
.demo { border-radius:
10px 20px
30px / 50px
60px;} |
等價於：
|
1
2
3
4
5
6
|
.demo { border-top-left-radius:
10px 50px; border-top-right-radius:
20px 60px; border-bottom-left-radius:
20px 60px; border-bottom-right-radius:
30px 50px;} |
效果：
我們從上面等價代碼中可以知道，不管他們怎麼取值，“/”前後各自按TRBL順序取值。
上面幾種都是我們常見的一些應用，那下面我們來看幾種特殊點的應用：
一、對於border-radius還有一個內半徑和外半徑的區別，它主要是元素 邊框值較大時，效果就很明顯，當我們border-radius半徑值小於或等於border的厚度時，我們邊框內部就不具有圓角效果,例如下面的實例：
|
1
2
3
4
|
.border-big { border:
15px solid
green; border-radius:
15px;} |
效果：
我們接着上面這個例子，把 border-radius半徑值改成比邊框值大一點：
|
1
2
3
4
|
.border-small
{ border:
15px solid
green; border-radius:
25px;} |
效果：
爲何當border-radius的半徑小於元素邊框的厚度時，內部沒有圓角效果？我在這裏說一下，因爲我們的border-radius的內徑值是等於外徑值減去邊框厚度值，當他們的值爲負時，內徑默認爲0,最前面講border-radius取值時就說過其值不能爲負值。同時也說明 border-radius的內外曲線的圓心並不一定是一致的。只有當邊框厚度爲0時，我們內外曲線的圓心纔會在同一位置。
二、如果角的兩個相鄰邊有不同的寬度，那麼這個角將會從寬的邊平滑過度到窄的邊。其中一條邊甚至可以是0。相鄰轉角是由大向小轉。
|
1
2
3
4
|
.demo { border-width:
10px 5px
20px 3px; border-radius:
30px;} |
效果：
三、相鄰兩條邊顏色和線條樣式不同時，那麼兩條相鄰邊顏色和樣式轉變的中心點是在一個和兩邊寬度成正比的角上。比如，兩條邊寬度相同，這個點就是一個45°的角上，如果一條邊是另外一條邊的兩倍，那麼這個點就在一個30°的角上。界定這個轉變的線就是連接在內外曲線上的兩個點的直線。我們來看一個四邊顏色不一樣，寬度不一樣的實例：
|
1
2
3
4
5
|
.demo { border-color:
red green
blue orange; border-width:
15px 30px
30px 80px; border-radius:
50px;} |
效果：
上面這幾種是比較特殊點的用法，如果大家還想通過border-radius製作更多不同形狀，或者更多的應用，可以點擊這裏。
border-radius能應用在各種元素中，但在img和table應用時會有點差別的，首先先來看圖片上應用border-radius 時的情況。在img上應用border-radius到目前只有Firefox4.0+瀏覽器才正常，而在其他瀏覽器都不能對圖片進行剪切，我們先來看一個實例：
|
1
2
3
4
|
img { border:
5px solid
green; border-radius:
15px;} |
我們來看其在各瀏覽器下的效果：
左圖是在Safari5.0、Google Chrome 10.0、Opera11.1下的效果，我們可以看得出，圖片根本就沒有圓角效果，右圖是在Firefox4.0下的效果，低於這個版本的和左圖一樣效果，如果需要達成一致效果，大家就必須放棄border-radius而採用CSS2製作圓角的老辦法。另外table的樣式屬性border- collapse是collapse時,border-radius不能正常顯示,只有border-collapse: separate;時才能正常顯示。
|
1
2
3
4
5
6
|
table { border-collapse:
collapse; border:
2px solid
red; background:
green; border-radius:
15px;} |
效果：
關於表格的demo可以查看這裏。
那麼到此，我們border-radius的一些用法就介紹完了。希望能給大家帶來一點幫助，感興趣的朋友可以觀注本站後面的內容，我們下節將介紹CSS3中的文本陰影（text-shadow）的用法。更希望感興趣的朋友一起探討和學習 CSS3 更多的技術知識。
