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

最新推荐文章于 2024-01-11 10:48:52 发布

正在努力中。。。

最新推荐文章于 2024-01-11 10:48:52 发布

阅读量232

点赞数

分类专栏：前端技术文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/cnttr/article/details/132224478

版权

先看效果图：

有时需要给文字加一个边框，并且希望边框能够呈现出颜色渐变效果，这里就给大家提供了一个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: "";