CSS3的圓角Border-radius

woff

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

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

一、語法：

1. 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軸，具體看下面：

1. border-top-left-radius: <length>  <length>   //左上角
   
2. border-top-right-radius: <length>  <length>  //右上角
   
3. border-bottom-right-radius:<length>  <length>  //右下角
   
4. 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. -moz-border-radius-topleft: //左上角
   
2.   -moz-border-radius-topright: //右上角
   
3.   -moz-border-radius-bottomright: //右下角
   
4.   -moz-border-radius-bottomleft: //左下角
   
5.    
   
6.    等價於：
   
7. 
   
8.   -moz-border-radius: //簡寫

複製代碼

2、WebKit (Safari, Chrome等瀏覽器)

1. -webkit-border-top-left-radius:  //左上角
   
2.   -webkit-border-top-right-radius:  //右上角
   
3.   -webkit-border-bottom-right-radius:  //右下角
   
4.   -webkit-border-bottom-left-radius:  // 左下角
   
5. 
   
6.    等價於：
   
7. 
   
8.   -webkit-border-radius:   //簡寫

複製代碼

3、Opera瀏覽器：

1. border-top-left-radius: //左上角
   
2.   border-top-right-radius: //右上角
   
3.   border-bottom-right-radius: //右下角
   
4.   border-bottom-left-radius: //左下角
   
5.   
   
6.   等價於：
   
7. 
   
8.   border-radius: //簡寫

複製代碼

4、Trident (IE)

IE<9不支持border-radius;IE9下沒有私有格式，都是用border-radius，其寫法和Opera是一樣的，這裡就不在重複。

為了不管是新版還是老版的各種內核瀏覽器都能支持border-radius屬性，那麼我們在具體應用中時需要把我們的border-radius格式改成：

1. -moz-border-radius: none | <length>{1,4} [/ <length>{1,4} ]?
   
2.   -webkit-border-radius: none | <length>{1,4} [/ <length>{1,4} ]?
   
3.   border-radius: none | <length>{1,4} [/ <length>{1,4} ]?

複製代碼

其拆分開來的格式相應需要加上-moz和-webkit，上面的代碼其實就等價於下面的代碼：

1. -moz-border-radius-topleft: <length> <length> //左上角
   
2.   -moz-border-radius-topright: <length> <length> //右上角
   
3.   -moz-border-radius-bottomright: <length> <length> //右下角
   
4.   -moz-border-radius-bottomleft: <length> <length> //左下角
   
5.   -webkit-border-top-left-radius:  <length> <length> //左上角
   
6.   -webkit-border-top-right-radius:  <length> <length> //右上角
   
7.   -webkit-border-bottom-right-radius: <length> <length> //右下角
   
8.   -webkit-border-bottom-left-radius:  <length> <length> // 左下角
   
9.   border-top-left-radius: <length> <length> //左上角
   
10.   border-top-right-radius: <length> <length> //右上角
    
11.   border-bottom-right-radius: <length> <length> //右下角
    
12.   border-bottom-left-radius: <length> <length> //左下角

複製代碼

另外需要特別注意的是，border-radius一定要放置在-moz-border-radius和-webkit-border-radius後面，（特別聲明：本文中所講實例都只寫了標準語法格式，如果你的版本不是上面所提到的幾個版本，如要正常顯示效果，請更新瀏覽器版本，或者在border-radius前面加上相應的內核前綴，在實際應用中最好加上各種版本內核瀏覽器前綴。）

我們初步來看一個實例：

HTML代碼：

1. <div class="demo"></div>

複製代碼

為了更好的看出效果，我們給這個demo添加一點樣式​​：

1. .demo {
   
2.   width: 150px;
   
3.   height: 80px;
   
4.   border: 2px solid #f36;
   
5.   background: #ccc;
   
6. }

複製代碼

注：如無特殊聲明，本文實例所有基本代碼格式如上所示，只在該元素上添加border-radius屬性設置。

1. .demo {
   
2.   border-radius: 10px 15px 20px 30px / 20px 30px 10px 15px;
   
3. }

複製代碼

這種寫法我們前面有提到過，“/”前是指圓角的水平半徑，而“/”後是指圓角的垂直半徑，他們兩都遵循TRBL的順序原則。為了能讓大家更清楚理解，我們把上面代碼換成如下：

1. .demo {
   
2.   border-top-left-radius: 10px 20px;
   
3.   border-top-right-radius: 15px 30px;
   
4.   border-bottom-right-radius: 20px 10px;
   
5.   border-bottom-left-radius: 30px 15px;
   
6. }

複製代碼

不彷看看他們的效果：



三、支持的瀏覽器：



上面我們介紹了border-radius的基本用法，以及在各大瀏覽器下的格式等，下面我們通過實例來介紹其具體的用法：

一：border-radius只有一個取值時，四個角具有相同的圓角設置，其效果是一致的：

.demo  {
   border-radius : 10 px;
}
其等價於：

.demo {
  border-top-left-radius : 10 px;  
border-top-right-radius : 10 px;  
border-bottom-right-radius : 10 px;  
border-bottom-left-radius : 10 px;
}


效果：



二：border-radius設置兩個值，此時top-left等於bottom-right並且他們取第一個值；top-right等於bottom-left並且他們取第二個值，也就是說元素左上角和右下角相同，右上角和左下角相同

1. .demo {
   
2.   border-radius: 10px 20px;
   
3. }
   
4. 等價於：
   
5. 
   
6. .demo {
   
7.   border-top-left-radius: 10px;
   
8.   border-bottom-right-radius: 10px;
   
9.   border-top-right-radius: 20px;
   
10.   border-bottom-left-radius: 20px;
    
11. }

複製代碼

效果：



三：border-radius設置三個值，此時top-left取第一個值，top-right等於bottom-left並且他們取第二個值，bottom-right取第三個值

1. .demo {
   
2.   border-radius: 10px 20px 30px;
   
3. }
   
4.       
   
5. 等價於
   
6.         
   
7. .demo {
   
8.   border-top-left-radius: 10px;
   
9.   border-top-right-radius: 20px;
   
10.   border-bottom-left-radius: 20px;
    
11.   border-bottom-right-radius: 30px;
    
12. }
    

複製代碼

效果：



四：border-radius設置四個值，此時top-left取第一個值，top-right取第二個值，bottom-right取第三個值.bottom-left取第四個值

1. .demo {
   
2.   border-radius:10px 20px 30px 40px;
   
3. }
   
4.       
   
5. 等價於
   
6.         
   
7. .demo {
   
8. border-top-left-radius: 10px;
   
9. border-top-right-radius: 20px;
   
10. border-bottom-right-radius: 30px;
    
11. border-bottom-left-radius: 40px;
    
12. }

複製代碼

效果：



從上面四個實例中我們可以看出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. .demo {
   
2.   border-radius: 10px / 20px;
   
3. }
   
4.       
   
5. 等價於：
   
6.         
   
7. .demo {
   
8.   border-top-left-radius: 10px 20px;
   
9.   border-top-right-radius: 10px 20px;
   
10.   border-bottom-right-radius: 10px 20px;
    
11.   border-bottom-left-radius: 10px 20px;
    
12. }

複製代碼

效果：



此時我們每個角不在是四分之一圓了，前面我們也說過，只有水平和垂直半徑值相同時，他們才具有四分之一圓特性，這樣一來，我們可以改變不同的半徑值，製作一些特殊的圖形效果，感興趣的朋友可以自己在本地嘗試一下各種不同的設置方式。

二、border-radius: 水平1 水平2 / 垂直1 垂直2：設置了兩個水平值和兩個垂直值，此時我們top-left和bottom-right具有相同的水平和垂直半徑，也就是其中的水平1和垂直1；而top-right和bottom-left也具有相同的水平和垂直半徑值，也就是水平2和垂直2，我們他拆分出來就是：

1. border-top-left-radius: 水平1  垂直1；
   
2. border-bottom-right-radius: 水平1  垂直1；
   
3. border-top-right-radius: 水平2  垂直2；
   
4. border-bottom-left-radius: 水平2  垂直2;

複製代碼

具體我們來看下面的實例：

1. .demo {
   
2.   border-radius: 10px 20px / 20px 10px;
   
3. }
   
4.         
   
5. 等價於：
   
6.         
   
7. .demo {
   
8.   border-top-left-radius: 10px 20px;
   
9.   border-bottom-right-radius: 10px 20px;
   
10.   border-top-right-radius: 20px 10px;
    
11.   border-bottom-left-radius: 20px 10px;
    
12. }

複製代碼

效果：



上面兩種都是相互對應的取值，我們來看一個實例，水平有三個取值，而垂直只有兩個取值

1. .demo {
   
2.   border-radius: 10px 20px 30px / 50px 60px;
   
3. }
   
4.         
   
5. 等價於：
   
6.         
   
7. .demo {
   
8.   border-top-left-radius: 10px 50px;
   
9.   border-top-right-radius: 20px 60px;
   
10.   border-bottom-left-radius: 20px 60px;
    
11.   border-bottom-right-radius: 30px 50px;
    
12. }

複製代碼

效果：



我們從上面等價代碼中可以知道，不管他們怎麼取值，“/”前後各自按TRBL順序取值。

上面幾種都是我們常見的一些應用，那下面我們來看幾種特殊點的應用：

一、對於border-radius還有一個內半徑和外半徑的區別，它主要是元素邊框值較大時，效果就很明顯，當我們border-radius半徑值小於或等於border的厚度時，我們邊框內部就不具有圓角效果,例如下面的實例

1. .border-big {
   
2.    border: 15px solid green;
   
3.    border-radius: 15px;
   
4. }

複製代碼

效果：



我們接著上面這個例子，把border-radius半徑值改成比邊框值大一點：

1. .border-small {
   
2.    border: 15px solid green;
   
3.    border-radius: 25px;
   
4. }

複製代碼

效果：



為何當border-radius的半徑小於元素邊框的厚度時，內部沒有圓角效果？我在這裡說一下，因為我們的border-radius的內徑值是等於外徑值減去邊框厚度值，當他們的值為負時，內徑默認為0,最前面講border-radius取值時就說過其值不能為負值。同時也說明border-radius的內外曲線的圓心並不一定是一致的。只有當邊框厚度為0時，我們內外曲線的圓心才會在同一位置。

二、如果角的兩個相鄰邊有不同的寬度，那麼這個角將會從寬的邊平滑過度到窄的邊。其中一條邊甚至可以是0。相鄰轉角是由大向小轉。

1. .demo {
   
2.   border-width: 10px 5px 20px 3px;
   
3.   border-radius: 30px;
   
4. }

複製代碼

效果：



三、相鄰兩條邊顏色和線條樣式不同時，那麼兩條相鄰邊顏色和样式轉變的中心點是在一個和兩邊寬度成正比的角上。比如，兩條邊寬度相同，這個點就是一個45°的角上，如果一條邊是另外一條邊的兩倍，那麼這個點就在一個30°的角上。界定這個轉變的線就是連接在內外曲線上的兩個點的直線。我們來看一個四邊顏色不一樣，寬度不一樣的實例：

1. .demo {
   
2.   border-color: red green blue orange;
   
3.   border-width: 15px 30px 30px 80px;
   
4.   border-radius: 50px;
   
5. }

複製代碼

效果：



上面這幾種是比較特殊點的用法，如果大家還想通過border-radius製作更多不同形狀，或者更多的應用，可以點擊這裡。

border-radius能應用在各種元素中，但在img和table應用時會有點差別的，首先先來看圖片上應用border-radius時的情況。在img上應用border-radius到目前只有Firefox4.0+瀏覽器才正常，而在其他瀏覽器都不能對圖片進行剪切，我們先來看一個實例：

1. img {
   
2.   border: 5px solid green;
   
3.   border-radius: 15px;
   
4. }

複製代碼

我們來看其在各瀏覽器下的效果：



左圖是在Safari5.0、Google Chrome 10.0、Opera11.1下的效果，我們可以看得出，圖片根本就沒有圓角效果，右圖是在Firefox4.0下的效果，低於這個版本的和左圖一樣效果，如果需要達成一致效果，大家就必須放棄border-radius而採用CSS2製作圓角的老辦法。另外table的樣式屬性border-collapse是collapse時,border-radius不能正常顯示,只有border-collapse: separate;時才能正常顯示。

1. table {
   
2.   border-collapse: collapse;
   
3.   border: 2px solid red;
   
4.   background: green;
   
5.   border-radius: 15px;
   
6. }

複製代碼

效果：



關於表格的demo可以查看這裡