第3章 CSS3边框-2

3.2 CSS3边框颜色属性

3.2.1 border-color属性的语法及参数

border-color的语法看上去和CSS1中的完全相同，但为了避免与border-color属性的原功能发生冲突，CSS3在这个属性上做出了一定的修改。语法如下：

    border-color : [  | transparent ] { 1, 4} | inherit

换句话说，如果使用border-color这种缩写语法，将不会有任何效果，必须将这个border-color标准写法拆分成四个边框，使用多颜色才会有效果。

• border-top-colors : [ | transparent ] { 1, 4} | inherit
• border-right-colors : [ | transparent ] { 1, 4} | inherit；
• border-bottom-colors : [ | transparent ] { 1, 4} | inherit；
• border-left-colors : [ | transparent ] { 1, 4} | inherit；

以上四个属性中color 是复数colors，如果在书写过程中要是少了s字母是错误的，没有任何反应。由于CSS3的border-color属性还没有成为标准规范，为了让不同的浏览器都能正常渲染，有必要加上浏览器前缀。

border-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 实现体检：立体渐变边框效果

border-color 制作立体渐变边框效果