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