控制邊框顏色：《CSS3 Border-color》

CSS3中有關於Border的屬性一共有三個:圓角border-radius,圖片邊框border-images,邊框多顏色border-color,其中圓角border-radius是經常使用的一個屬性，並且如今不少網站製做圓角效果都使用border-radius來實現;

在CSS2中，咱們能夠把border-color同時應用到不一樣的邊框上，也能夠分別在各邊上色，如：

 

border-color: <color>/*其中能夠上一個值，也能夠是多個值，具體我在這裏很少說了，你們來時用到的也特別多*/ /*咱們能夠分別給各邊上色*/ border-top-color: <color>/*給上邊框上色*/ border-right-color: <color> /*給右邊框上色*/ border-bottom-color:<color> /*給下邊框上色*/ border-left-color: <color> /*給左框上色*/

 上面展現的是給元素邊框上色的方法，你們都知道這樣能夠給邊框上惟一色。但是若是咱們想給邊框添加不一樣的顏色，好比說給邊框添加一個漸變色，或者說一個彩色，那麼咱們前面的方法就無能爲力了，那怎麼辦呢?爲了達到這樣的效果，CSS3就推出了其本身的border-color屬性，不過到目前爲止只有Firefox 3.0+的瀏覽支持這個屬性。也是由於這一點，css3的border-color應用是至關的少，據個人瞭解，目前尚未發現有項目應用css3的border-color來實現邊框特殊效果。但這一點都不會影響咱們這些css3的愛好者學習css3各類屬性的熱情。下面咱們就繼續，看看css3的bborder-color是如何使用。

前面咱們說過CSS3的border-color目前只有Mozilla的Firefox3.0+瀏覽器支持，因此咱們有必要在前面加上其前綴「-moz-」。如今咱們來看看其語法的書寫規則

 

 -moz-border-top-colors: <color> <color> <color>*; /*頂邊邊框*/ -moz-border-right-colors:<color> <color> <color>*; /*右邊邊框*/ -moz-border-bottom-colors: <color> <color> <color>*; /*底邊邊框*/ -moz-border-left-colors: <color> <color> <color>*; /*左邊邊框*/ 

 從上面的語法規則來看，咱們把元素四邊分開了書寫，但這裏有一點和CSS2的不一樣之處，在CSS3中咱們使用的是border-top-colors,border-right-colors,border-bottom-colors,border-left-colors，當中的colors是個複數，而在CSS2中都是border-top-color,border-right-color,border-bottom-color,border-left-color。這一點你們必定要記住了，在CSS3中是「colors」由於咱們是應用多色。這裏你們必定會問，咱們假如在各邊應用的顏色相同時，能不能不分開寫呢？直接寫成：

 

-moz-border-colors: <color> <color> <color> <color>*;/*這樣縮寫能行嗎？*/

 針對這點，我要大聲的告訴你們，上面的寫法是錯誤的，咱們不能像css2中的border-color這樣縮寫。若是縮寫的話，是沒有任何效果的。但願你們要記住這個不一樣之處，以避免形成沒有任何效果顯示。

上面咱們介紹了CSS3的border-color與CSS2中的border-color在語法上的不一樣之處，下面咱們接着來看看其取值上的不一樣之處。

使用css3的border-color屬性時，若是你的boder寬度設置了X px,那麼你能夠在這個邊框上使用X種顏色，此時每個顏色就是一個px。若是你的border寬度設置了10px，而你只運用了三四個顏色，那麼最後一個顏色將會填充到後面的寬度上。

下面咱們來看一個簡單的實例：

 

.demo { width: 200px; height: 100px; border: 5px solid transparent; -moz-border-top-colors: red blue white white black; -moz-border-right-colors: red blue white white black; -moz-border-bottom-colors: red blue white white black; -moz-border-left-colors: red blue white white black; }

 效果以下所示：

咱們還能夠利用這個屬性製做漸變的邊框效果

 

.demo1 { width: 200px; height: 100px; border: 10px solid transparent; border-radius: 15px 0 15px 0; -moz-border-top-colors:#a0a #909 #808 #707 #606 #505 #404 #303; -moz-border-right-colors:#a0a #909 #808 #707 #606 #505 #404 #303; -moz-border-bottom-colors:#a0a #909 #808 #707 #606 #505 #404 #303; -moz-border-left-colors:#a0a #909 #808 #707 #606 #505 #404 #303; }

 效果以下圖所示：

CSS3中的border-color相對於前面介紹的CSS3屬性來講比較簡單點，因此今天也簡單介紹了一下其使用的方法，以及取值的細節之處。最後在提醒你們一點，到目前只有Firefox3.0版本以上的瀏覽器才能支持，因此此屬性的應用範圍相對來講不多，幾乎來講沒什麼地方使用。若是隻是學習的話，仍是能夠試試效果。若是須要應用到項目中的話，仍是時機不成熟。那麼今天我就介紹到這裏了.