css3之border-color
-moz-border-top-colors：上边框
-moz-border-right-colors：右边框
-moz-border-bottom-colors：下边框
-moz-border-left-colors：左边框
这个css是用来定义边框颜色的，可以给边框定义多种颜色，截至目前为止，仅 Firefox 支持，而且必须通过添加前缀 -moz- 才可实现。
举例：正常的边框颜色通常都只有一种，比如一个8px的边框，要么纯红的，要么纯绿的，肯定不可能一个边框上红绿交替，但通过以上四种css属性，就可以做到一条边框上有N种颜色。
实现的方式，比如上边框：-moz-border-top-colors
border-top:8px solid #fff;
-moz-border-top-colors:red orange yellow green blue pink purple gray;
这里定义的一个从上到下，颜色依次为红橙黄绿蓝粉紫灰，共8种颜色的一个边框。
如果定义了一个8px的边框，但是我的颜色值不到8种的时候，是这么计算的：
如果有一种颜色，则取用该色值为边框色；
如果有两种颜色，则从外至内，位于第1位的色值占用1px的边框，剩下的7px边框全采用位于第2位的色值；
如果有三种颜色，则从外至内，位于第1位的色值占用1px的边框，位于第二位的色值占用1px的边框，剩下的6px全采用位于第3位的色值；
依此类推......
如果有七种颜色，从外至内，位于前6位的色值各占用1px的边框，位于第7位的色值占用剩下的2px边框
如果有八种颜色，则每种色值各占用1px的边框。
下面是一个案例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>border-color</title>
<style>
*{margin:0; padding:0;}
body{background-color:#000; color:#fff;}
div {
width:200px;
height:100px;
margin:50px;
padding:10px;
border: 8px solid #fff;
-moz-border-top-colors:red orange yellow green blue pink purple gray;
-moz-border-right-colors:red orange yellow green blue pink purple gray;
-moz-border-bottom-colors:red orange yellow green blue pink purple gray;
-moz-border-left-colors:red orange yellow green blue pink purple gray;
}
</style>
</head>
<body>
<div>看我的边框效果</div>
</body>
</html>
效果图：
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
