關於圓角詳解

標籤：

基本文法：

　　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; }

　　效果：

　　

 

關於圓角詳解