CSS：文字外框圆角彩色渐变效果

先看效果图：

 有时需要给文字加一个边框，并且希望边框能够呈现出颜色渐变效果，这里就给大家提供了一个demo可以参考。源码如下：

<template>
  <div class="demo" ><span style="display: inline-block;" >测试页面</span></div>
</template>

<script setup>
import {ref} from "vue";
import requestUtil from "@/util/request";


</script>

<style lang="scss" scoped>

.demo{
  width: 200px;
  height: 60px;
  position: relative;
  border-radius: var(--border-radius);
  --border-width: 5px;
  --border-radius: 20px;
  --border-color:  linear-gradient(270deg, rgba(311, 125, 233, 2), rgba(133, 166, 122, 2));
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20vh;
}
.demo::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: var(--border-width);
  border-radius: var(--border-radius);
  background: var(--border-color);
  --mask-bg: linear-gradient(red, blue);
  --mask-clip: content-box, padding-box;
  -webkit-mask-image: var(--mask-bg), var(--mask-bg);
  -webkit-mask-clip: var(--mask-clip);
  -webkit-mask-composite: destination-out;
}

</style>

代码比较简单，不做过多解释了。大家可以根据自己的需求修改文字内容、边框大小和颜色渐变配置，的都自己想要的各种效果。