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

以上是css3中關於Border的屬性一些實例用法程式碼詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！