css3之border-color-LMLPHP

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

效果图:

css3之border-color-LMLPHP

05-11 18:27