图解css3:核心技术与案例实战. 3.2 CSS3边框颜色属性

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>

上一篇:Android 软键盘


下一篇:画图板--画直线代码