css 左右渐变-css中如何实现边框颜色渐变代码解释

在css中，如果一条边框线的长度为n个像素，那么它可以设置为n种不同的颜色。

在代码中，我们可以定义一条宽度为7px的虚线： border: 7pxsolid #C8C8C8; （不用关心这里设置的颜色，firefox中之前的代码会被新设置的颜色覆盖）

如果同时为边框的四个边设置渐变的颜色，如下代码所示：

  
 
       
        p{
                 height: 100px;
                 width: 100px;
                 border: 7px solid red;
                 border-color: red green yellow black;
             }    
         

登录复制

运行html文件后css 左右渐变，我们得到的效果如下：

代码会按照顺时针的方式手动将我们设置的颜色分配给上、右、下、左。 如果我们只设置3种颜色，那么结果就很明显了，直接分配给上、右、下三个方向的边框。 因此，为了让代码知道我们不想按照这个规则设置边框颜色css 左右渐变，我们应该为边框的每个方向分别设置渐变颜色，代码如下：

   
  
       
                p{
                       height: 100px;
                       width: 100px;
                       background: #E8F5FC;
                       border: 7px solid red;
                      -moz-border-top-colors: #FDFDFD #F9F9F9  #F4F4F4 #ECECEC #E2E2E2 #D6D6D6 #C8C8C8;
                      -moz-border-right-colors:  #FDFDFD #F9F9F9  #F4F4F4 #ECECEC #E2E2E2 #D6D6D6 #C8C8C8;
                      -moz-border-bottom-colors: #FDFDFD #F9F9F9  #F4F4F4 #ECECEC #E2E2E2 #D6D6D6 #C8C8C8;
                      -moz-border-left-colors:  #FDFDFD #F9F9F9  #F4F4F4 #ECECEC #E2E2E2 #D6D6D6 #C8C8C8;
                   }
      

    

登录复制

其执行结果如下：

需要注意的是，边框的边框颜色设置是从内到内的，所以第一个颜色代码是最里面的颜色，最后一个颜色代码是最外面的颜色。