在边框上放置渐变是一种非常常见的效果。有很多想法可以实现这种效果。今天我就把已知的方法列出来供大家参考。

1。使用 border-image

CSS 提供的 border-image 属性可以在边框上绘制复杂的图案。与壁纸一样，我们可以显示图像和线性渐变。

设置渐变边框 border-image 是最简单的方法。只需要两行代码：

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;
}

Codepen demo 点击预览

虽然简单，但是有一个明显的缺陷。它不支持边缘半径设置。接下来，我们介绍几种支持边缘半径 的方法。

2。使用背景

使用背景绘制渐变背景并用纯色覆盖中心。这应该是最简单的思考方式。这个想法是：将两个盒子放在一起，在下面的盒子上放置渐变背景和垫子，在上面的盒子上放置纯色背景。

HTML:

<div class="border-box border-bg">
  <div class="content">
    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*/
}

Codepen demo点击预览

这种方法的优点是简单易懂，兼容性好。缺点是内容设置为边缘半径，既尴尬又不精确。

3。两层元素，背景图片，背景剪辑

要解决不精确的问题，可以使用boundary-radius2的方法将各个元素放置在最底层，如下渐变背景。上层设置透明边框和纯色背景（背景剪辑：必须放置填充框，以便不覆盖下层元素的边缘）。上下层设置为相同的边缘半径。

HTML：

<div class="border-box">
  <div class='border-bg'></div>
  <div class="content">
    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);
}

Codepen 演示通过单击

进行预览4。伪元素，方法3的简化

伪元素可以代替div.border-bg来简化HTML结构。

HTML：

<div class="border-box">
  <div class="content">
    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);
}

Codepen 演示通过单击

进行预览5。一层元素，背景剪辑、背景ground-ori gin

<div class="border-box">
  <div class="content">
    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>

.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);
}