玩转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开发者无聊的时候打发时间的一个玩具，然而小编还是很喜欢这个属性，所以只能说一句，真的是太可惜了。