在日常开发需求中避免不了要做渐变边框，毕竟设计的法宝也就那些比如模糊、渐变等等。今天小七教你如何使用css绘制渐变边框，直接惊呆旁边的切图仔同事

线性渐变边框

比如我们要绘制一个宽度为1px的渐变边框，那么我们可以进行如下操作：

    border: 1px solid transparent;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: linear-gradient(93.75deg, #51bdff 2.58%, #28b2ff 100.26%), 
      linear-gradient(to right, rgba(255, 255, 255, 1),rgba(141, 215, 247, 1));

主要是利用了背景起点位置这个属性： background-origin 该属性有三个值：border-box、content-box、padding-box,默认值是padding-box即不包含边框，这三个值的表现如下(观察黄色笑脸)：

• 我们通过设置1px的透明边框，然后设置背景渐变色，第一个因为是padding-box所以只会在边框内部上色进行渐变，第二个渐变因为是border-box所以可以占据边框的位置，又因为边框是透明的所以可以展示出底部的渐变色，我们的目的就是设置要渐变的边框的起点为border-box。
• 还有重要的一点是使用了背景裁剪background-clip，我们如果不设置该属性默认是border-box也就是包含边框会一起增加背景色，该属性有三个可选值：border-box、content-box、padding-box其中黑色点表示边框，黄色表示背景色，表现如下：

• 最后还有一个容易忽略的点，那就是background-image的使用，当其传多个参数时，表现像是ps的图层一样，第一个参数永远在最高层，往后图层依次变低，所以我们很容易便可以绘制出渐变边框，原理如下：

  • 首先，我们在最高的图层绘制一个非border-box的背景，然后在第二个图层绘制一个border-box的背景，因为第一个图层始终高于后面的图层所以我们的渐变边框就可以展示出来了。

• 简单几行代码我们的渐变边框就实现出来了如下：