今天来简单聊一下渐变边框的实现方式

肺腑之言

在我两年前离职的时候，那之前我没有做过任何效果的渐变边框，觉得好高深啊（太菜了，简单一个边框就让我觉得高深了）。其实我入坑编程也是因为觉得它实在是太奇妙了，太高深了，太让人捉摸不透了，现在依旧如此。

什么是渐变边框呢？先上一个效果图：

 

虽然不太明显，但是中间那条灰色的线就是，只不过两边是白色的。

简单介绍

1、linear-gradient()

linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。

语法：

background: linear-gradient(direction, color-stop1, color-stop2, ...);

direction：用角度值指定渐变的方向（或角度）。  

color-stop1, color-stop2,...：指定渐变的起止颜色。

2、border-image

border-image属性是速记属性，用于设置 border-image-source, border-image-slice, border-image-width, border-image-outset 和border-image-repeat 的值。

省略的值设置为它们的默认值。

语法：

border-image: source slice width outset repeat|initial|inherit;

border-image-source	用于指定要用于绘制边框的图像的位置
border-image-slice	图像边界向内偏移
border-image-width	图像边界的宽度
border-image-outset	用于指定在边框外部绘制 border-image-area 的量
border-image-repeat	用于设置图像边界是否应重复（repeat）、拉伸（stretch）或铺满（round）。

以上介绍内容摘自菜鸟教程 。

下面介绍两种方法：

方法一： background

.line{
    background: -moz-linear-gradient(180deg,#fff,#eee,#fff);
    background: -o-linear-gradient(180deg,#fff,#eee,#fff);
    background: -webkit-linear-gradient(180deg,#fff,#eee,#fff);
    background: linear-gradient(180deg,#fff,#eee,#fff);
}

方法二：border-image

.line{
    border-right: 1px solid #eee;
    border-image: -moz-linear-gradient(#fff,#eee,#fff) 20 20;
    border-image: -o-linear-gradient(#fff,#eee,#fff) 20 20;
    border-image: -webkit-linear-gradient(#fff,#eee,#fff) 20 20;
    border-image: linear-gradient(#fff,#eee,#fff) 20 20;
  }

万变不离其宗的是不管是background还是border-image都是css3的渐变属性linear-gradient实现的。

废话

好记性不如烂笔头，不求多么有深度，只求点子正确能用到实际项目中。