Skip to main content

CSS 实现渐变色边框

五月, 2023 · 预计阅读时间： 2 分钟

前端CSS

如何绘制一个如下图渐变色的边框？

<body>
  <div class="box">Gradient Borders</div>
</body>

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

.box {
  display: inline-block;
  margin: 10px;
  padding: 10px;
  border: 4px solid transparent;
  border-radius: 16px; /* 不生效 */
  /* 关键 */
  border-image: linear-gradient(to right, #8f41e9, #578aef) 1;
}

这种方式虽然简单但有个明显的缺陷，不支持设置 border-radius。

最容易想到的一种方法是使用两个盒子叠加，给下层的盒子设置渐变色背景和 padding，给上层盒子设置纯色背景，然后设置一样的 border-radius。

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

.box {
  display: inline-block;
  margin: 10px;
  padding: 10px;
  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, #8f41e9, #578aef);
}

上面的方式都是有背景色的渐变边框，那么如何设置透明背景的渐变边框呢？

到时候问下 AI 。。。