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

haozit146

于 2008-02-06 23:34:00 发布

阅读量3.1k

点赞数

分类专栏： css3.0 文章标签： css firefox border 浏览器

本文链接：https://blog.csdn.net/haozit146/article/details/2086075

版权

css3.0 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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;

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