5种CSS实现渐变色边框（Gradient borders方法的汇总

蔚落 2022-08-28 05:43 248阅读 0赞

![3c8a5fd65dde75bccd23d9fee67dc194.png][]

来源 | https://segmentfault.com/a/1190000040794056

给 border 设置渐变色是很常见的效果，实现这个效果有很多思路，今天把我所知道的方法罗列于此供大家参考。

![8c2bf6aae0f9867b4a20e49b53523be0.png][]

# **1、使用 border-image** #

css 提供了 border-image 属性用于给 border 绘制复杂图样，与 background-image 类似，我们可以在 border 中展示image和linear-gradient。

通过 border-image 设置渐变色 border 是最简单的方法，只需要两行代码：

CSS:

div {
      border: 4px solid;
      border-image: linear-gradient(to right, #8f41e9, #578aef) 1;
    }
    
    
    /* 或者 */
    div {
      border: 4px solid;
      border-image-source: linear-gradient(to right, #8f41e9, #578aef);
      border-image-slice: 1;
    }

这种方式虽然简单但有个明显的缺陷，不支持设置 border-radius。接下来会介绍几种支持 border-radius 的方法。

# **2、 使用 background-image** #

使用 background-image 绘制渐变色背景，并且把中间用纯色遮住应该是最容易想到的一种方法。

思路是：使用两个盒子叠加，给下层的盒子设置渐变色背景和 padding，给上层盒子设置纯色背景。

html:

<div>
      <div>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste ratione
        necessitatibus numquam sunt nihil quos saepe sit facere. Alias accusamus
        voluptate accusantium facere fugiat animi temporibus adipisci! Corporis,
        accusamus tempora.
      </div>
    </div>

CSS:

.border-box {
      width: 300px;
      height: 200px;
      margin: 25px 0;
    }
    
    
    .border-bg {
      padding: 4px;
      background: linear-gradient(to right, #8f41e9, #578aef);
      border-radius: 16px;
    }
    
    
    .content {
      height: 100%;
      background: #222;
      border-radius: 13px; /*trciky part*/
    }

这种方式的优点是容易理解，兼容性好，缺点是设置 content 的 border-radius 会比较 tricky，且不准确。

# **3、两层元素、background-image、background-clip** #

为了解决方法 2 中 border-radius 不准确的问题，可以使用一个单独的元素作为渐变色背景放在最下层，上层设置一个透明的 border 和纯色的背景（需要设置 background-clip: padding-box 以避免盖住下层元素的 border）, 上下两层设置相同的 border-radius。

html:

<div>
      <div></div>
      <div>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste ratione necessitatibus numquam sunt nihil quos
        saepe sit facere. Alias accusamus voluptate accusantium facere fugiat animi temporibus adipisci! Corporis,
        accusamus tempora.
      </div>
    </div>

**CSS:**

.border-box {
      border: 4px solid transparent;
      border-radius: 16px;
      position: relative;
      background-color: #222;
      background-clip: padding-box; /*important*/
    }
    
    
    .border-bg {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      z-index: -1;
      margin: -4px;
      border-radius: inherit; /*important*/ 
      background: linear-gradient(to right, #8f41e9, #578aef);
    }

# **4、 伪元素、方法3的简化** #

我们可以使用伪元素替换 div.border-bg 以简化HTML结构。

HTML:

<div>
      <div>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste ratione necessitatibus numquam sunt nihil quos
        saepe sit facere. Alias accusamus voluptate accusantium facere fugiat animi temporibus adipisci! Corporis,
        accusamus tempora.
      </div>
    </div>

**CSS:**

.border-box {
      border: 4px solid transparent;
      border-radius: 16px;
      position: relative;
      background-color: #222;
      background-clip: padding-box; /*important*/
    }
    
    
    .border-box::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      z-index: -1;
      margin: -4px;
      border-radius: inherit; /*important*/
      background: linear-gradient(to right, #8F41E9, #578AEF);
    }

# **5、单层元素、background-clip、background-origin、background-image** #

最后是我觉得最优雅的一种方法，只需要用到单层元素，为其分别设置 background-clip、background-origin、background-image 这三个属性，每个属性设置两组值，第一组用于设置border内的单色背景，第二组用于设置border上的渐变色。

HTML:

<div>
      <div>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste ratione necessitatibus numquam sunt nihil quos
        saepe sit facere. Alias accusamus voluptate accusantium facere fugiat animi temporibus adipisci! Corporis,
        accusamus tempora.
      </div>
    </div>

**CSS:**

.border-box {
      border: 4px solid transparent;
      border-radius: 16px;
      background-clip: padding-box, border-box;
      background-origin: padding-box, border-box;
      background-image: linear-gradient(to right, #222, #222), linear-gradient(90deg, #8F41E9, #578AEF);
    }

目前就能想到这5种方法，个人推荐优先使用方法4和方法5。

最后，感谢您的阅读，如果你觉得我分享的方法有用，请记得给我点个赞。

#  #

**学习更多技能**

**请点击下方公众号**

![e66d23a49f460da04b66f2bba6c48225.gif][]

![86395b00599f9f9393f4a29dde43a90e.png][]

![7e9939f3b7de3199e3b17439ee40a38b.png][]

[3c8a5fd65dde75bccd23d9fee67dc194.png]: /images/20220828/b564b7c097f04f539f79ded4c4a4161d.png
[8c2bf6aae0f9867b4a20e49b53523be0.png]: /images/20220828/2d86dc4b55aa4ec8872453d1f44bd4ed.png
[e66d23a49f460da04b66f2bba6c48225.gif]: /images/20220828/5a78b7de365445979f3c0cca6e392143.png
[86395b00599f9f9393f4a29dde43a90e.png]: /images/20220828/cda9daf67a4540729e1609cd5e76d382.png
[7e9939f3b7de3199e3b17439ee40a38b.png]: /images/20220828/56a4f12c7f834892aab03acba0e8355a.png