3.2 CSS3邊框顏色屬性
3.2.1 border-color屬性的語(yǔ)法及參數(shù)
border-color的語(yǔ)法看上去和CSS1中的完全相同弧蝇，但為了避免與border-color屬性的原功能發(fā)生沖突衅枫，CSS3在這個(gè)屬性上做出了一定的修改影兽。語(yǔ)法如下：
border-color : [ <color> | transparent ] { 1, 4} | inherit
換句話說(shuō)，如果使用border-color這種縮寫(xiě)語(yǔ)法，將不會(huì)有任何效果，必須將這個(gè)border-color標(biāo)準(zhǔn)寫(xiě)法拆分成四個(gè)邊框，使用多顏色才會(huì)有效果锻梳。
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疑枯；
以上四個(gè)屬性中color 是復(fù)數(shù)colors，如果在書(shū)寫(xiě)過(guò)程中要是少了s字母是錯(cuò)誤的蛔六，沒(méi)有任何反應(yīng)荆永。由于CSS3的border-color屬性還沒(méi)有成為標(biāo)準(zhǔn)規(guī)范，為了讓不同的瀏覽器都能正常渲染古今，有必要加上瀏覽器前綴屁魏。
border-color屬性的參數(shù)其實(shí)很簡(jiǎn)單，就是顏色值<color>捉腥，可以為任意合法的顏色值或者顏色值列表氓拼。當(dāng)只設(shè)置一個(gè)顏色時(shí)，效果和CSS1中的border-color效果一樣抵碟。只有設(shè)置了n個(gè)顏色桃漾，并且邊框?qū)挾纫矠閚像素，就可以使用CSS3的border-color屬性設(shè)置n個(gè)顏色拟逮，每種顏色顯示1像素撬统，如果寬度值大于顏色數(shù)量的值，最后一種顏色用于顯示剩下的寬度敦迄。
3.2.2 瀏覽器兼容性
目前（2016年12月8日）僅有firefox支持恋追，需要帶-moz-前綴凭迹。
3.2.3 border-color屬性的優(yōu)勢(shì)
在CSS2中實(shí)現(xiàn)多顏色的邊框效果，無(wú)外乎兩種方法苦囱，其一通過(guò)添加額外的標(biāo)簽嗅绸，在每個(gè)標(biāo)簽上設(shè)置不同的顏色，其二就是通過(guò)背景圖片來(lái)制作撕彤。這兩種方法和CSS3的border-color相比都略顯弊端鱼鸠，第一種多了標(biāo)簽，使結(jié)構(gòu)冗余羹铅，第二種方法背景圖片不好維護(hù)蚀狰，特別是在改變邊框顏色之時(shí)更是麻煩。
3.2.4 實(shí)現(xiàn)體檢：立體漸變邊框效果
<!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>
