1、border-color 描述
border-color(边框颜色)在CSS2、CSS3中区别:
==》css2中,唯一色(即一个边框只有一种)
合写:
border-color: <color> /*其中可以上一个值,也可以是多个值;*/ 拆分写: border-top-color: <color> border-right-color: <color> border-bottom-color:<color> border-left-color: <color>
==》css3中,多色(即一个边框可有多种)
CSS3中写法规则:
-moz-border-top-colors: <color> <color> <color>*; /*顶边边框*/ -moz-border-right-colors:<color> <color> <color>*; /*右边边框*/ -moz-border-bottom-colors: <color> <color> <color>*; /*底边边框*/ -moz-border-left-colors: <color> <color> <color>*; /*左边边框*/
合写错误:(不能合写 -- 无效果)
-moz-border-colors: <color> <color> <color> <color>*;/*这样缩写能行吗?-- 不行*/
2、border-color 兼容
目前只有 Firefox 3.0+ 的浏览器支持;有必要在前面加上其前缀“-moz-”。
3、border-color 用法
CSS3中 可制作渐变的边框效果
.demo1 {
200px;
height: 100px;
border: 10px solid transparent;
border-radius: 15px 0 15px 0;
-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;
}
![](https://images0.cnblogs.com/blog2015/711292/201505/111548590012124.png)
提示:
使用css3的border-color属性时,如果你的boder宽度设置了n px,那么你可以在这个边框上使用n种颜色,此时每一个颜色就是一个px。
如果你的border宽度设置了10px,而你只运用了三四个颜色,那么最后一个颜色将会填充到后面的宽度上。