製作圓角：《CSS3 Border-radius》

標籤：style   http   java   color   strong   width   

今天我們在一起來看看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、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軸，具體看下面：

 

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等瀏覽器)

-moz-border-radius: //簡寫

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

   -webkit-border-radius: //簡寫

 3、Opera瀏覽器：

  border-radius: //簡寫

 4、Trident (IE)

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

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

 

-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} ]?

 另外需要特別注意的是，border-radius一定要放置在-moz-border-radius和-webkit-border-radius後面