CSS3在线中文参考指南 - border-color » 张鑫旭-鑫空间-鑫生活

您尚未登录，无法添加相关文章。 - 登录

新用户？

哎呀，出了点小问题，您可以稍后重试！

未填写内容或格式不正确！

CSS3 border-color使用参考指南

浏览：48906次

基础知识(取自腾讯ISD Webteam CSS3中文手册)

语法：

border-color ： <color>

相关属性 ：border-top-color, border-right-color, border-bottom-color , border-left-color

取值：

<color>：颜色值。

说明：

设置对象边框的颜色。

使用CSS3的border-radius属性，如果你设置了border的宽度是X px，那么你就可以在这个border上使用X种颜色，每种颜色显示1px的宽度。如果说你的border的宽度是10个像素，但是只声明了5或6种颜色，那么最后一个颜色将被添加到剩下的宽度。

引擎类型	Gecko	Webkit	Presto
Border-color	-moz-border-color

兼容性：

类型	Internet Explorer	Firefox	Chrome	Opera	Safari
版本	(×)IE6	(×)Firefox 2.0	(×)Chrome 1.0.x	(×)Opera 9.64	(×)Safari 3.1
	(×)IE7	(√)Firefox 3.0	(×)Chrome 2.0.x
	(×)IE8	(√)Firefox 3.5

代码与实例

CSS代码：

#border_color{
    border: 10px solid #dedede;
    -moz-border-bottom-colors: #300 #600 #700 #800 #900 #A00;
    -moz-border-top-colors: #300 #600 #700 #800 #900 #A00;
    -moz-border-left-colors: #300 #600 #700 #800 #900 #A00;
    -moz-border-right-colors: #300 #600 #700 #800 #900 #A00;
    padding: 15px 25px;
    width: 250px;
}

HTML代码：

<div id="border_color">Firefox浏览器下可见渐变边框效果</div>

效果截图

查看demo原页面>>

拓展知识点（由各前端同仁提供）

知识点(1) 提供者：张鑫旭最后编辑：张鑫旭[编辑本段]

目前只有Firefox支持CSS3 border-color属性，所以我们只需使用-moz前缀就可以就可以实现Firefox浏览器下的多边框色效果。

例如：border:4px solid #000000; -moz-border-bottom-colors:#999999 #bbbbbb #eeeeee #eeeeee; 目前只有Firefox支持CSS3 border-color属性，所以我们只需使用-moz前缀就可以就可以实现Firefox浏览器下的多边框色效果。

例如：border:4px solid #000000; -moz-border-bottom-colors:#999999 #bbbbbb #eeeeee #eeeeee;

对下面的内容进行修改编辑：

我来添加++

图片地址是：取消

插入：