現在我們來看一看如何為邊框的border-color新增更多的色彩。

使用CSS3的border-radius屬性，如果你設定了border的寬度是X px，那麼你就可以在這個border上使用X種顏色，每種顏色顯示1px的寬度。如果說你的border的寬度是10個畫素，但是隻聲明瞭5或6中顏色，那麼最後一個顏色將被新增到剩下的寬度。

瀏覽器相容性

只有firefox支援

CSS3中的邊框顏色

border-color

這裡是一個10px寬的標準邊框和邊框顏色：

#borderColor { 
    border: 10px solid #dedede;
    -moz-border-bottom-colors: #300 #600 #700 #800 #900 #A00;
    -moz-border-top-colors: #300 #600 #700 #800 #900 #A00;
    -moz-border-left-colors: #300 #600 #700 #800 #900 #A00;
    -moz-border-right-colors: #300 #600 #700 #800 #900 #A00;
    padding: 15px 25px;
    height: inherit;
    width: 590px; 
}

有圓角的邊框顏色

border-color-round

#borderColorCorner { 
    border: 10px solid #dedede;
    -moz-border-radius: 15px;
    -moz-border-bottom-colors: #303 #404 #606 #808 #909 #A0A;
    -moz-border-top-colors: #303 #404 #606 #808 #909 #A0A;
    -moz-border-left-colors: #303 #404 #606 #808 #909 #A0A;
    -moz-border-right-colors: #303 #404 #606 #808 #909 #A0A;
    padding: 15px 25px;
    height: inherit;
    width: 590px; 
}

CSS3系列教程|前端觀察

特別宣告，本系列文章譯自：Zen Elements，非常感謝Alex的辛勤工作。
Special Staterment: this series posts were translate from Zen Elements, thanks Alex for his great work so much.