css3.0抢先看(二)：border-color边框颜色的新用法，绝对酷

原创于 2008-02-06 23:34:00 发布 · 3.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #firefox #border #浏览器

css3.0 专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何使用CSS3中的border-color属性创建渐变边框效果，此特性在Firefox浏览器中得到支持。通过详细解释代码实现过程，帮助读者了解渐变边框的工作原理。

css3.0里的border-color选项又有了新功能，它能输出渐变的边框。在firefox中支持该效果，看下面边框的效果：
:

如果你现在用的是Firefox 的浏览器，那就能看到这个边框的渐变效果

它实现的代码是:

border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors:    #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors:   #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors:  #555 #666 #777 #888 #999 #aaa #bbb #ccc;
padding: 5px 5px 5px 15px;

他的原理是边框设定了边框的宽度后，可以由外道内一个像素一个像素的设置颜色，相当于有很多一个像素的边框组成一个大边框。