3.2 CSS3边框颜色属性
border-color属性早在CSS1中就已经定义了。不过，CSS3增强了这个属性的功能，使用它可以为元素边框设置更多的颜色，从而方便Web设计人员设计出更为绚丽的边框效果，例如渐变的边框效果、多颜色的边框效果等。
3.2.1 border-color属性的语法及参数
border-color的语法看上去和CSS1中的完全相同，但为了避免与border-color属性的原功能（也就是在CSS1中的定义边框颜色功能）发生冲突，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属性还没成为标准规范，为了让不同浏览器能渲染正常，有必要加上前缀，如表3-2所示。
表3-2 不同浏览器前缀
浏览器分类 浏览器 私有属性的前端缀
Gecko引擎内核的浏览器 Mozilla（常指Firefox浏览器） -moz-
Presto引擎内核的浏览器 Opera -o-
KHTML引擎内核的浏览器 Konqueror -khtml-
Trident引擎内核的浏览器 Internet Explorer -ms-
有些情况中，为了使用CSS3属性，可能必须添加4行代码或者更多行。例如，为了让border-color在Firefox浏览器下正常，需要加上前缀“-moz-”。
-moz-border-top-colors: #111 #222 #333 #444 #555;
-moz-border-right-colors: #111 #222 #333 #444 #555;
-moz-border-bottom-colors: #111 #222 #333 #444 #555;
-moz-border-left-colors: #111 #222 #333 #444 #555;
现在的规范还不是最终版本，在执行中还会有一些漏洞。因此，执行这些功能时，使用供应商前缀来提供数值，并且使用无前缀声明来提供每个属性的永久版本。当规范成为最终版本且经过完善后，浏览器前缀将被取消。例如：
-moz-border-top-colors: #111 #222 #333 #444 #555;
-moz-border-right-colors: #111 #222 #333 #444 #555;
-moz-border-bottom-colors: #111 #222 #333 #444 #555;
-moz-border-left-colors: #111 #222 #333 #444 #555;
-webkit-border-top-colors: #111 #222 #333 #444 #555;
-webkit-border-right-colors: #111 #222 #333 #444 #555;
-webkit-border-bottom-colors: #111 #222 #333 #444 #555;
-webkit-border-left-colors: #111 #222 #333 #444 #555;
-ms-border-top-colors: #111 #222 #333 #444 #555;
-ms-border-right-colors: #111 #222 #333 #444 #555;
-ms-border-bottom-colors: #111 #222 #333 #444 #555;
-ms-border-left-colors: #111 #222 #333 #444 #555;
-o-border-top-colors: #111 #222 #333 #444 #555;
-o-border-right-colors: #111 #222 #333 #444 #555;
-o-border-bottom-colors: #111 #222 #333 #444 #555;
-o-border-left-colors: #111 #222 #333 #444 #555;
border-top-colors: #111 #222 #333 #444 #555;
border-right-colors: #111 #222 #333 #444 #555;
border-bottom-colors: #111 #222 #333 #444 #555;
border-left-colors: #111 #222 #333 #444 #555;
即使用这些前缀来维护代码似乎需要很多工作，现在使用CSS3，仍然是利大于弊。虽然需要改变一些前缀属性来修改设计元素，相对于通过图形软件更改背景图像或处理那些其他标记和hack脚本，维护基于CSS3的设计要容易一些。
Lea Verou制作了一个插件-prefix-free，使用这个插件，大家在平时的开发中就可以略去浏览器的前缀，从而节约大家的开发时间与维护成本。
注
意 如无特别注明，后面涉及的CSS3属性，都需加上各浏览器前缀。
border-color属性的参数其实很简单，就是颜色值< color>，可以为任意合法的颜色值或者颜色值列表。当border-color只设置一个颜色值时，效果和CSS1中的border-color效果一样。只有设置了n个颜色，并且边框宽度也为n像素，就可以使用CSS3的border-color属性设置n个颜色，每种颜色显示1像素的宽度，如果宽度值大于颜色数量的值，最后一种颜色用于显示剩下的宽度。例如，元素的边框设置为20px，而元素的边框颜色只设置了10个，剩下的10px宽度都将显示最后一种颜色，如图3-2所示。
3.2.2 浏览器兼容性
CSS3的“border-color”属性浏览器兼容性虽然功能强大，但到写这本书的时候为止，仅有Firefox 3.0以及其以上的版本支持，而且还不是标准写法（如表3-3所示）。
表3-3 border-color浏览器兼容性
属性名
border-color × 3.0 +√ × × ×
CSS3的border-color能帮Web设计师制作渐变、内阴影、外阴影等绚丽的边框效果，但是目前为止，仅有Firefox 3.0以及其以上版本的浏览器支持，而且还不是标准语法，仅是Firefox浏览器自己一个扩展性写法。因此这个属性的使用性并不是很强，大家在实际使用中需要注意。
3.2.3 border-color属性的优势
在CSS2中实现多颜色的边框效果，无外乎两种方法，其一通过添加额外的标签，在每个标签上设置不同的颜色，其二就是通过背景图片来制作。这两种方法和CSS3的border-color相比都略显弊端，第一种多了标签，使结构冗余，第二种方法背景图片不好维护，特别是在改变边框颜色之时更是麻烦。
有一篇博文介绍了使用一个HTML标签元素，通过“::before”和“::after”伪元素使用背景色和边框颜色来模拟一个六色边框的效果，这种方法对多颜色受到限制，最多只能制作六种颜色。
注
意 除了这些方法，CSS3中还有box-shadow也能实现，详细参考后面介绍box-shadow的章节。
3.2.4 实战体验：立体渐变边框效果
在这个案例中，使用CSS3的border-color属性制作一个渐变立体效果的边框，如图3-3所示。
制作这个效果的设计思路很简单，使用border-color属性，将颜色从浅到深依次叠加起来，营造出一种立体渐变的边框效果。
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>border-color制作立体渐变边框效果</title>
<style type="text/css">
div{
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;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
