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 制作立体渐变边框效果
