CSS3 -- 邊框顏色（border-color）

一、border-color 描述

　　border-color（邊框顏色）在CSS二、CSS3中區別：

　　==》css2中，惟一色（即一個邊框只有一種）　　

合寫：
border-color: <color>   /*其中能夠上一個值，也能夠是多個值；*/
拆分寫：
border-top-color: <color> 
border-right-color: <color>  
border-bottom-color:<color> 
border-left-color: <color> 

　　==》css3中，多色（即一個邊框可有多種）

CSS3中寫法規則：
-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>*; /*左邊邊框*/ 

合寫錯誤：（不能合寫 -- 無效果）
-moz-border-colors: <color> <color> <color> <color>*;/*這樣縮寫能行嗎？-- 不行*/ 

二、border-color 兼容

　　目前只有 Firefox 3.0+ 的瀏覽器支持；有必要在前面加上其前綴「-moz-」。

三、border-color 用法

CSS3中 可製做漸變的邊框效果

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

 

整理自：（W3CPlus）CSS3 Border-color