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