css3中如何设置边框颜色渐变？ css3边框颜色渐变的两种实现

很多时候在开发网页时，可能会因为某些原因需要设置边框的颜色渐变，那么如何设置边框的颜色渐变呢？ 本文将向您介绍如何使用CSS3设置边框颜色渐变。

当我们设置边框颜色渐变的时候，我们可以使用css3中的属性是border-image或者border-colorcss3边框颜色渐变，那么如何为这两个属性设置边框颜色渐变呢。

我们首先看一个由 border-image 属性实现的简单 CSS3 边框颜色渐变的示例：

第一种：border-image设置边框颜色渐变示例

    
    
    
        .box{
            width: 100px;
            height: 100px;
            border:10px solid #ddd;
            border-image: -webkit-linear-gradient(#F80, #2ED) 20 20;
            border-image: -moz-linear-gradient(#F80, #2ED) 20 20;
            border-image: -o-linear-gradient(#F80, #2ED) 20 20;
            border-image: linear-gradient(#F80, #2ED) 20 20;
        }
    


    

登录复制

CSS3边框颜色渐变效果如下：

说明：在上面的代码中，你会发现在border-image上添加了一个线性渐变。 为什么是这样？ 因为如果不加线性渐变，就没有线性渐变的效果。 （border-image的用法有很多，可以参考css指南。）

看完了 border-image 属性实现边框颜色渐变的反例，我们再来看看 border-color 属性实现边框颜色渐变的反例。

第二种：border-color 设置边框颜色渐变示例

border-color 属性为我们提供了同一个边框的多种颜色，但目前只有 Firefox 3.0+ 浏览器支持该属性。 所以我们在使用或测试时需要添加-moz-前缀。

我们看一下用法：

.box{
    border：5px solid transparent;
    -moz-border-top-colors：    ;
    -moz-border-right-colors：    ;
    -moz-border-bottom-colors：    ;
    -moz-border-left-colors：    ;
}

登录复制

此时我们为每个边框设置了5种颜色，它们都占用了5px的长度。 此时每种颜色的border-width为1px。 事实上，如果我们为边框设置x个像素的长度css3边框颜色渐变，并为每个边框设置y种颜色，如果x>y，则前y-1种颜色各占1pxcss3边框颜色渐变，最后一种颜色占x -y+ 1 像素。

我们来看一个css3边框颜色渐变的例子：三维渐变效果

.box {
    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;
  }

登录复制

效果如下：