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

新用户?

哎呀,出了点小问题,您可以稍后重试!

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

CSS3 border-color使用参考指南

浏览:32783

相关技术文章博览

我要添加++

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

语法:

border-color<color>

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

取值:
<color>:颜色值。
说明:
  1. 设置对象边框的颜色。

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

引擎类型 Gecko Webkit Presto
Border-color -moz-border-color    
       
兼容性:
类型 IEInternet Explorer FirefoxFirefox ChromeChrome OperaOpera SafariSafari
版本 (×)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>
                
效果截图
CSS3 border-color效果截图
查看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;
对下面的内容进行修改编辑:
图片地址是:取消
插入:

我要分享

分享到:1