3.2 CSS3边框颜色属性
border-color属性早在CSS1中就已经定义了。不过,CSS3增强了这个属性的功能,使用它可以为元素边框设置更多的颜色,从而方便Web设计人员设计出更为绚丽的边框效果,例如渐变的边框效果、多颜色的边框效果等。
3.2.1 border-color属性的语法及参数
border-color的语法看上去和CSS1中的完全相同,但为了避免与border-color属性的原功能(也就是在CSS1中的定义边框颜色功能)发生冲突,CSS3在这个属性上做出一定的修改。语法如下。
border-color: [ <color> | transparent ]{1,4} | inherit
换句话说,如果使用border-color这种缩写语法,将不会有任何效果,必须将这个border-color标准写法拆分成四个边框,使用多颜色才会有效果。
border-top-colors: [ <color> | transparent ]{1,4} | inherit;
border-right-colors: [ <color> | transparent ]{1,4} | inherit;
border-bottom-colors: [ <color> | transparent ]{1,4} | inherit;
border-left-colors: [ <color> | transparent ]{1,4} | inherit;
注
意 以上四个属性中color是复数colors,如果在书写过程中要是少了(s)字母是错误的,没有任何反应。
由于CSS3的border-color属性还没成为标准规范,为了让不同浏览器能渲染正常,有必要加上前缀,如表3-2所示。
表3-2 不同浏览器前缀
浏览器分类 浏览器 私有属性的前端缀
Gecko引擎内核的浏览器 Mozilla(常指Firefox浏览器) -moz-
Presto引擎内核的浏览器 Opera -o-
KHTML引擎内核的浏览器 Konqueror -khtml-
Trident引擎内核的浏览器 Internet Explorer -ms-
有些情况中,为了使用CSS3属性,可能必须添加4行代码或者更多行。例如,为了让border-color在Firefox浏览器下正常,需要加上前缀“-moz-”。
-moz-border-top-colors: #111 #222 #333 #444 #555;
-moz-border-right-colors: #111 #222 #333 #444 #555;
-moz-border-bottom-colors: #111 #222 #333 #444 #555;
-moz-border-left-colors: #111 #222 #333 #444 #555;
现在的规范还不是最终版本,在执行中还会有一些漏洞。因此,执行这些功能时,使用供应商前缀来提供数值,并且使用无前缀声明来提供每个属性的永久版本。当规范成为最终版本且经过完善后,浏览器前缀将被取消。例如:
-moz-border-top-colors: #111 #222 #333 #444 #555;
-moz-border-right-colors: #111 #222 #333 #444 #555;
-moz-border-bottom-colors: #111 #222 #333 #444 #555;
-moz-border-left-colors: #111 #222 #333 #444 #555;
-webkit-border-top-colors: #111 #222 #333 #444 #555;
-webkit-border-right-colors: #111 #222 #333 #444 #555;
-webkit-border-bottom-colors: #111 #222 #333 #444 #555;
-webkit-border-left-colors: #111 #222 #333 #444 #555;
-ms-border-top-colors: #111 #222 #333 #444 #555;
-ms-border-right-colors: #111 #222 #333 #444 #555;
-ms-border-bottom-colors: #111 #222 #333 #444 #555;
-ms-border-left-colors: #111 #222 #333 #444 #555;
-o-border-top-colors: #111 #222 #333 #444 #555;
-o-border-right-colors: #111 #222 #333 #444 #555;
-o-border-bottom-colors: #111 #222 #333 #444 #555;
-o-border-left-colors: #111 #222 #333 #444 #555;
border-top-colors: #111 #222 #333 #444 #555;
border-right-colors: #111 #222 #333 #444 #555;
border-bottom-colors: #111 #222 #333 #444 #555;
border-left-colors: #111 #222 #333 #444 #555;
即使用这些前缀来维护代码似乎需要很多工作,现在使用CSS3,仍然是利大于弊。虽然需要改变一些前缀属性来修改设计元素,相对于通过图形软件更改背景图像或处理那些其他标记和hack脚本,维护基于CSS3的设计要容易一些。
Lea Verou制作了一个插件-prefix-free,使用这个插件,大家在平时的开发中就可以略去浏览器的前缀,从而节约大家的开发时间与维护成本。
注
意 如无特别注明,后面涉及的CSS3属性,都需加上各浏览器前缀。
border-color属性的参数其实很简单,就是颜色值< color>,可以为任意合法的颜色值或者颜色值列表。当border-color只设置一个颜色值时,效果和CSS1中的border-color效果一样。只有设置了n个颜色,并且边框宽度也为n像素,就可以使用CSS3的border-color属性设置n个颜色,每种颜色显示1像素的宽度,如果宽度值大于颜色数量的值,最后一种颜色用于显示剩下的宽度。例如,元素的边框设置为20px,而元素的边框颜色只设置了10个,剩下的10px宽度都将显示最后一种颜色,如图3-2所示。
3.2.2 浏览器兼容性
CSS3的“border-color”属性浏览器兼容性虽然功能强大,但到写这本书的时候为止,仅有Firefox 3.0以及其以上的版本支持,而且还不是标准写法(如表3-3所示)。
表3-3 border-color浏览器兼容性
属性名
border-color × 3.0 +√ × × ×
CSS3的border-color能帮Web设计师制作渐变、内阴影、外阴影等绚丽的边框效果,但是目前为止,仅有Firefox 3.0以及其以上版本的浏览器支持,而且还不是标准语法,仅是Firefox浏览器自己一个扩展性写法。因此这个属性的使用性并不是很强,大家在实际使用中需要注意。
3.2.3 border-color属性的优势
在CSS2中实现多颜色的边框效果,无外乎两种方法,其一通过添加额外的标签,在每个标签上设置不同的颜色,其二就是通过背景图片来制作。这两种方法和CSS3的border-color相比都略显弊端,第一种多了标签,使结构冗余,第二种方法背景图片不好维护,特别是在改变边框颜色之时更是麻烦。
有一篇博文介绍了使用一个HTML标签元素,通过“::before”和“::after”伪元素使用背景色和边框颜色来模拟一个六色边框的效果,这种方法对多颜色受到限制,最多只能制作六种颜色。
注
意 除了这些方法,CSS3中还有box-shadow也能实现,详细参考后面介绍box-shadow的章节。
3.2.4 实战体验:立体渐变边框效果
在这个案例中,使用CSS3的border-color属性制作一个渐变立体效果的边框,如图3-3所示。
制作这个效果的设计思路很简单,使用border-color属性,将颜色从浅到深依次叠加起来,营造出一种立体渐变的边框效果。
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>border-color制作立体渐变边框效果</title>
<style type="text/css">
div{
width: 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;
}
</style>
</head>
<body>
<div></div>
</body>
</html>