關於圓角詳解

基本語法：

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

取值範圍：

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

簡單說明：

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

　　一、只有一個值，那麼 top-left、top-right、bottom-right、bottom-left 四個值相等。

　　二、有兩個值，那麼 top-left 等於 bottom-right，而且取第一個值；top-right 等於 bottom-left，而且取第二個值

　　三、有三個值，其中第一個值是設置top-left;而第二個值是 top-right 和 bottom-left 而且他們會相等,第三個值是設置 bottom-right。

　　四、有四個值，其中第一個值是設置 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 在不一樣內核瀏覽器下的書寫格式：

　　一、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: //簡寫

　　二、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:  //簡寫

　　三、Opera瀏覽器：

1 2 3 4

border-top-left-radius: //左上角 border-top-right-radius: //右上角 border-bottom-right-radius: //右下角 border-bottom-left-radius: //左下角

  等價於：

1	border-radius: //簡寫

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

　　不仿看看他們的效果：

　　

　　3、支持的瀏覽器：

　　

　　上面咱們介紹了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原則（從上邊右邊下邊左邊 分別對應一、2，3，4四個值），只不過border-radius換成了左上角(top-left)對就值1，右上角（top-right）對應值2， 右下角(bottom-right)對應值3，左下角(bottom-left)對應值4.

　　上面四個實例都是水平和垂直半徑相等狀況下border-radius的應用，下面咱們來看幾個水平和垂直半徑值不同的實例：

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

　　效果：

　　

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

　　2、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順序取值。

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

　　1、對於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時，咱們內外曲線的圓心纔會在同一位置。

　　2、若是角的兩個相鄰邊有不一樣的寬度，那麼這個角將會從寬的邊平滑過分到窄的邊。其中一條邊甚至能夠是0。相鄰轉角是由大向小轉。

1 2 3 4

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

　　效果：

　　

　　3、相鄰兩條邊顏色和線條樣式不一樣時，那麼兩條相鄰邊顏色和樣式轉變的中心點是在一個和兩邊寬度成正比的角上。好比，兩條邊寬度相同，這個點就 是一個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; }

　　效果：