玩转CSS3的多色边框
为边框设置颜色，相信大家都不陌生，控制该效果的属性叫border-color。
css3出来了一个叫border-colors的属性，跟border-color相比就多了一个字母，然而这样的影响就大了。很显然前者是后者的复数形式，也就是说，现在我们可以给边框设置多个颜色了。
border-color可以为不同的边设置不同的颜色。
写法如下
border-color:#0c0 #0f0 #000 #999;
那么问题来了，border-colors能像border-color那样把多条边的颜色写在一起吗？
答案是否定的，因为合在一起的话，浏览器将无法区分颜色分别归到哪条边上。
比如
border-colors:#0c0 #ccc #ff0 #0f0 #000 #999;
我们区分不了哪一种或者哪几种颜色分别属于哪条边，CSS3没有规定4条边的颜色数量必须相等。这样的话，第一条边可以取:#0c0 #ccc #ff0三种颜色，也可以只取#0c0 #ccc两种颜色。
解决方法可以是用逗号分隔，不过CSS3没做这样的支持，毕竟这里合着写，可读性太差了。
所以最后需要分成4个属性来写
-moz-border-top-colors:red blue white white black;
-moz-border-right-colors:red blue white white black;
-moz-border-bottom-colors:red blue white white black;
-moz-border-left-colors:red blue white white black;
我们先来编写基础的html代码。为了更方便观察多种颜色，我们让边框粗一点。
代码如下
运行效果如下图所示
现在我们写上多色边框的属性
.multi-color{
/*其它样式代码省略*/
-moz-border-top-colors:red blue white white black;
-moz-border-right-colors:red blue white white black;
-moz-border-bottom-colors:red blue white white black;
-moz-border-left-colors:red blue white white black;
}
这里只写了火狐浏览器的前缀，是不是有点别扭？是的，因为到目前为止，这个属性只有火狐浏览器支持，而且也没被w3c收录。所以只有火狐浏览器才能看到如下图所示的效果。
由于各颜色之间的对比很大，所以多色的效果很明显。
其实，我们还可以用相似的颜色实现带渐变效果的边框
.multi-color{
/*其它样式代码省略*/
-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;
}
再次运行，效果如下图所示，还是蛮好看的对吧。
该属性出来有好几年了，但目前仍然只有火狐浏览器支持它，所以web设计师都不敢把这属性应用在实际项目里面。究其原因，可能是颜色太多容易被不懂配色的人用烂，导致w3c的名声被他们搞臭。这就注定了该属性只能是web开发者无聊的时候打发时间的一个玩具，然而小编还是很喜欢这个属性，所以只能说一句，真的是太可惜了。
