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

水深无声 2024-03-23 21:21 73阅读 0赞

先看效果图：

![900ba64aa028405299764d54188b5386.bmp][]

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

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

[900ba64aa028405299764d54188b5386.bmp]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/98a12353f23847838445ed3ca9e2a550.png

发表评论取消回复

表情：

评论列表（有 0 条评论，73人围观）

还没有评论，来说两句吧...

相关阅读

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

先看效果图： ![900ba64aa028405299764d54188b5386.bmp][] 有时需要给文字加一个边框，并且希望边框能够呈现出颜色渐变效果，这里就给大家

水深无声/ 2024年03月23日 21:21/ 0 赞/ 74 阅读

相关 css3 文字渐变

之前一直没有遇到过让文字渐变，这次也算是遇到了，没办法啊，又是一个不知道的知识点。这么久了，学到最多的也算是有问题找百度，度娘是真的好啊。 ![度娘真棒啊][waterma

喜欢ヅ旅行/ 2023年07月25日 06:16/ 0 赞/ 130 阅读

相关 css实现文字颜色渐变

.fl-left{ float:left; font-size: 46px; font-weight: 500;

布满荆棘的人生/ 2022年12月26日 10:21/ 0 赞/ 256 阅读

相关 css3 文字渐变动画效果

.css { background-image: -webkit-linear-gradient(left, red, blue 25%, 147B96 5

川长思鸟来/ 2022年12月07日 11:40/ 0 赞/ 265 阅读

相关 CSS实现渐变圆角边框

> 渐变边框可以使用 `border-image`，但带有圆角的渐变边框单靠 `border-image`却无法实现，那有哪些方法可以实现圆角渐变边框呢？ [css实用小知

小鱼儿/ 2022年10月19日 00:50/ 0 赞/ 360 阅读

相关 html字体的渐变效果,神奇！js+CSS+DIV实现文字颜色渐变效果

本文实例为大家分享了DIV+CSS+JS实现的文字颜色渐变效果，供大家参考，具体内容如下下面是 CSS 部分代码： body\{ font:12px/1.5 Micro

约定不等于承诺〃/ 2022年10月06日 00:57/ 0 赞/ 361 阅读

相关 246.CSS 渐变圆角边框

效果 (源码网盘地址在最后) ![70bd77719c286f0c0b60906286fb67b8.gif][] 源码 index.html <!DOC

痛定思痛。/ 2022年09月12日 12:44/ 0 赞/ 261 阅读

相关 CSS圆角框制作（1）

在盒子模型里面没有设置圆角框的属性，要在Div+CSS中实现圆角框，只能使用圆角背景图片。若单纯使用截取下来的圆角框，则其大小是固定的，不能改动。这就要

客官°小女子只卖身不卖艺/ 2022年08月13日 04:58/ 0 赞/ 227 阅读

相关 CSS-文字效果

1.1、自定义字体: <!doctype html> <html lang="en"> <head> <meta charset="

逃离我推掉我的手/ 2022年07月15日 10:30/ 0 赞/ 378 阅读

相关 CSS圆角效果

上一篇博文中提到了css2.0的圆角效果，但是没有实现，今天闲着没事儿做了一个，想想还是css3来的痛快，用css2做一个圆角确实还是挺痛苦的，其他不说了，先截个图

淩亂°似流年/ 2022年06月13日 09:17/ 0 赞/ 267 阅读