css3中關於Border的屬性一些執行個體用法代碼詳解

CSS3中有關於Border的屬性一共有三個：圓角border-radius，圖片邊框border-image,邊框多顏色border-color，其中圓角border-radius是常用的一個屬性，而且現在很多網站製作圓角效果都使用border-radius來實現。

 /*我們可以分別給各邊上色*/  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是如何使用。

來看看其文法的書寫規則

-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”

使用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;  }