《图解CSS3——第3章 CSS3边框-2》

3.2 CSS3边框颜色属性

3.2.1 border-color属性的语法及参数

border-color的语法看上去和CSS1中的完全相同，但为了避免与border-color属性的原功能发生冲突，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属性还没有成为标准规范，为了让不同的浏览器都能正常渲染，有必要加上浏览器前缀。

border-color属性的参数其实很简单，就是颜色值<color>，可以为任意合法的颜色值或者颜色值列表。当只设置一个颜色时，效果和CSS1中的border-color效果一样。只有设置了n个颜色，并且边框宽度也为n像素，就可以使用CSS3的border-color属性设置n个颜色，每种颜色显示1像素，如果宽度值大于颜色数量的值，最后一种颜色用于显示剩下的宽度。

3.2.2 浏览器兼容性

目前（2016年12月8日）仅有firefox支持，需要带-moz-前缀。

3.2.3 border-color属性的优势

在CSS2中实现多颜色的边框效果，无外乎两种方法，其一通过添加额外的标签，在每个标签上设置不同的颜色，其二就是通过背景图片来制作。这两种方法和CSS3的border-color相比都略显弊端，第一种多了标签，使结构冗余，第二种方法背景图片不好维护，特别是在改变边框颜色之时更是麻烦。

3.2.4 实现体检：立体渐变边框效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>border-color 制作立体渐变边框效果</title>
    <style>
        div{
            width: 500px;
            height: 100px;
            border: 10px solid transparent;
            border-radius: 15px 0 15px;
            -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>

border-color 制作立体渐变边框效果

 

posted @ 2016-12-08 23:16  白小虫  阅读(191)  评论(0)  编辑  收藏  举报