CSS3 Border-color

CSS3中有關於Border的屬性一共有三個：圓角border-radius，圖片邊框border-image,邊框多顏色border-color，其中圓角border-radius是經常使用的一個屬性，並且如今不少網站製做圓角效果都使用border-radius來實現，具體的使用方法能夠查閱本站有關於border-radius的介紹。今天咱們主要來學習border-color的使用。

border-color這個屬性我想你們必定不會陌生，由於咱們平時常能看到並使用這個屬性。那麼在CSS3中這個屬性又有什麼不一樣之處呢？又將如何使用呢？今天咱們就帶着這兩個問題開始咱們CSS3中的border-color的學習。在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版本以上的瀏覽器才能支持，因此此屬性的應用範圍相對來講不多，幾乎來講沒什麼地方使用。若是隻是學習的話，仍是可 以試試效果。若是須要應用到項目中的話，仍是時機不成熟。那麼今天我就介紹到這裏了，下一節我將會整理CSS3中border的最後一個屬性border-image的使用方法，感興趣的朋友能夠隨時觀注本站的有關更新。