实现渐变底色边框的多种方案

虽然国内的研发环境都秉持着“能用则行，简约商务”的“领先”概念，但作为一个有追求，有审美的前端开发者，不论是处于对技术的追求，还是对审美的要求，我们都应当了解各类优秀UI的实现方式。

方案一：border-image

此方法最简单，直接使用 border-image属性，搭配透明色border即可完成效果

<template>
  <div class="flex-box">
    <div class="content text-2xl px-4 py-2 bg-blue-dark border-2 border-transparent">
      Content
    </div>
  </div>
</template>
<style scoped lang="less">
.content {
  border-image: linear-gradient(153deg, #114357, #f29492) 1;
}
</style>

缺点

无法配合 border-radius使用，border-radius并不能改变 border-image的曲度，仅能形成直角的边框。

方案二：伪元素

此方法可完美使用 border-radius形成边框曲度，由 before伪元素形成渐变色层，由 after伪元素形成纯色背景层，最后使用 inset属性，让背景层向内偏移，形成边框效果。

一定要注意子元素要在伪元素上层。

<template>
  <div class="flex-box">
    <div class="box text-2xl px-4 py-2">
      <div class="content">Content</div>
    </div>
  </div>
</template>
<style scoped lang="less">
.box {
  display: flex;
  place-content: center;
  place-items: center;
  position: relative;
  border-radius: 0.75rem; /* 与父元素圆角一致 */
  overflow: hidden;
  .content {
    z-index: 1; /* 确保内容在伪元素之上 */
  }
}
.box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 0.75rem; /* 与父元素圆角一致 */
  background: linear-gradient(153deg, #114357, #f29492); /* 渐变边框 */
  pointer-events: none; /* 使伪元素不影响父元素的交互 */
}
.box::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  inset: 0.2rem;
  border-radius: 0.75rem; /* 与父元素圆角一致 */
  background-color: black;
  pointer-events: none; /* 使伪元素不影响父元素的交互 */
}
</style>

缺点

由于 before伪元素是整个渐变色图片，所以需要 after伪元素来充当背景色营造边框效果，所以无法完成透明背景色的元素需求。

Tips

但伪元素可以搭配动画完成比较绚丽的效果，让渐变边框不停变化。