图解css3:核心技术与案例实战. 3.2 CSS3边框颜色属性-阿里云开发者社区

开发者社区> 华章计算机> 正文

图解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>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
duilib 修复padding属性导致其他控件自动计算宽高度错误的bug和导致自己宽高度错误的bug
转载请说明原出处,谢谢~~:http://blog.csdn.net/zhuhongshu/article/details/42950733          BUG 一:padding导致其他控件宽度计算错误             今天在写项目的一个布局时,用到了最常用的相对布局属性padding:在一个纵向容器里,给其中的各个子元素设置了padding属性来做相对布局。
1097 0
Flink批处理优化器之数据属性
在一段时间之前我们已介绍过IP(Interesting Property)对于优化器的意义以及它将对优化器的优化决策产生的影响。本篇我们将介绍Flink的批处理优化器中涉及到的所有的IP,我们将其统称为数据属性。
1059 0
《手机测试Robotium实战教程》—第2章2.2节Eclipse的安装
可根据个人喜好选择对应的集成开发工具,本书是在Eclipse IDE下进行的。
1260 0
duilib 修复Text控件无法设置宽度的bug,增加自动加算宽度的属性
转载请说明原出处,谢谢~~:       今天有朋友反映CTextUI控件无法设置宽度,于是修复了这个bug,顺便给Text控件增加了一个自动计算宽度的属性,描述如下       bug出现在EstimeteSize函数,...
925 0
10059
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载