3.2 CSS3邊框顏色屬性
3.2.1 border-color屬性的語法及參數
border-color的語法看上去和CSS1中的完全相同，但為了避免與border-color屬性的原功能發生沖突，CSS3在這個屬性上做出了一定的修改。語法如下：
border-color : [ <color> | transparent ] { 1, 4} | inherit
換句話說，如果使用border-color這種縮寫語法，將不會有任何效果，必須將這個border-color標準寫法拆分成四個邊框，使用多顏色才會有效果。
border-top-colors : [ <color> | transparent ] { 1, 4} | inherit-
border-right-colors : [ <color> | transparent ] { 1, 4} | inherit； -
border-bottom-colors : [ <color> | transparent ] { 1, 4} | inherit； -
border-left-colors : [ <color> | transparent ] { 1, 4} | inherit；
以上四個屬性中color 是復數colors，如果在書寫過程中要是少了s字母是錯誤的，沒有任何反應。由于CSS3的border-color屬性還沒有成為標準規范，為了讓不同的瀏覽器都能正常渲染，有必要加上瀏覽器前綴。
border-color屬性的參數其實很簡單，就是顏色值<color>，可以為任意合法的顏色值或者顏色值列表。當只設置一個顏色時，效果和CSS1中的border-color效果一樣。只有設置了n個顏色，并且邊框寬度也為n像素，就可以使用CSS3的border-color屬性設置n個顏色，每種顏色顯示1像素，如果寬度值大于顏色數量的值，最后一種顏色用于顯示剩下的寬度。
3.2.2 瀏覽器兼容性
目前（2016年12月8日）僅有firefox支持，需要帶-moz-前綴。
3.2.3 border-color屬性的優勢
在CSS2中實現多顏色的邊框效果，無外乎兩種方法，其一通過添加額外的標簽，在每個標簽上設置不同的顏色，其二就是通過背景圖片來制作。這兩種方法和CSS3的border-color相比都略顯弊端，第一種多了標簽，使結構冗余，第二種方法背景圖片不好維護，特別是在改變邊框顏色之時更是麻煩。
3.2.4 實現體檢：立體漸變邊框效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>border-color 制作立體漸變邊框效果</title>
<style>
div{
width: 500px;
height: 100px;
border: 10px solid transparent;
border-radius: 15px 0 15px;
-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;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
border-color 制作立體漸變邊框效果
