CSS实现渐变色边框

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

使用 border-image

css 提供了 border-image 属性用于给 border 绘制复杂图样，与 background-image 类似，我们可以在 border 中展示image和linear-gradient。 这种方式虽然简单但有个明显的缺陷，不支持设置 border-radius。

<div>
  设置渐变色是很常见的效果,设置渐变色是很常见的效果,设置渐变色是很常见的效果,设置渐变色是很常见的效果
</div>

div {
  border: 4px solid;
  border-image: linear-gradient(to right, #11418a, #3d99ce) 1;
}

/* 或者 */
div {
  border: 4px solid;
  border-image-source: linear-gradient(to right, #11418a, #3d99ce);
  border-image-slice: 1;
}

使用 background-image

使用 background-image 绘制渐变色背景，并且把中间用纯色遮住应该是最容易想到的一种方法。 思路是：使用两个盒子叠加，给下层的盒子设置渐变色背景和 padding，给上层盒子设置纯色背景。 这种方式的优点是容易理解，兼容性好，缺点是设置 content 的 border-radius 会比较 tricky，且不准确。

<div class="border-box border-bg">
  <div class="content">
    设置渐变色是很常见的效果,设置渐变色是很常见的效果,设置渐变色是很常见的效果,设置渐变色是很常见的效果
  </div>
</div>

.border-box {
  width: 300px;
  height: 200px;
  margin: 25px 0;
}

.border-bg {
  padding: 4px;
  background: linear-gradient(to right, #11418a, #3d99ce);
  border-radius: 16px;
}

.content {
  height: 100%;
  background: #fff;
  border-radius: 13px; /*trciky part*/
}

两层元素、background-image、background-clip

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

<div class="border-box">
  <div class="border-bg"></div>
  <div>
    设置渐变色是很常见的效果,设置渐变色是很常见的效果,设置渐变色是很常见的效果,设置渐变色是很常见的效果
  </div>
</div>

.border-box {
  border: 4px solid transparent;
  border-radius: 16px;
  position: relative;
  background-color: #fff;
  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, #11418a, #3d99ce);
}

伪元素、上面方法的简化

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

<div class="border-box">
  <div>
    设置渐变色是很常见的效果,设置渐变色是很常见的效果,设置渐变色是很常见的效果,设置渐变色是很常见的效果
  </div>
</div>

.border-box {
  border: 4px solid transparent;
  border-radius: 16px;
  position: relative;
  background-color: #fff;
  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, #11418a, #3d99ce);
}

单层元素、background-clip、background-origin、background-image

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

<div class="border-box">
  <div>
    设置渐变色是很常见的效果,设置渐变色是很常见的效果,设置渐变色是很常见的效果,设置渐变色是很常见的效果
  </div>
</div>

.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, #fff, #fff), linear-gradient(90deg, #11418a, #3d99ce);
}