全栈开发技术分享
首页
👉 CSS大揭秘 👈
  • 目录
  • 分类
  • 标签
  • 归档
  • Vue
  • JavaScript
  • 微信开发
  • 移动端H5调试工具
  • 国内十大前端团队网站
  • Nodejs
  • Egg
  • 环境搭建
  • 运维面板
  • 域名配置
  • Nginx
  • 收藏
  • 常用工具
  • 实用技巧
  • 常用命令
  • 友情链接
关于

Dreaming Lee 🍍 ҉҉҉҉҉҉҉҉

开发小菜鸡
首页
👉 CSS大揭秘 👈
  • 目录
  • 分类
  • 标签
  • 归档
  • Vue
  • JavaScript
  • 微信开发
  • 移动端H5调试工具
  • 国内十大前端团队网站
  • Nodejs
  • Egg
  • 环境搭建
  • 运维面板
  • 域名配置
  • Nginx
  • 收藏
  • 常用工具
  • 实用技巧
  • 常用命令
  • 友情链接
关于
  • 边框

    • 1px边框
  • 视觉效果

    • 文字效果

      • 文字渐变色
      • 展示小于12px文字
      • 超出展示省略号
    • 进度条

      • 按钮进度条
  • 布局

    • 水平垂直居中
  • 动画

    • 小手动画
  • 其他

    • CSS设置滚动条样式
  • CSS
  • 视觉效果
  • 文字效果
Dreaming Lee 🍍 ҉҉҉҉҉҉҉҉
2021-07-06

文字渐变色

知识点:background-clip (opens new window)

# 通过 background-image: linear-gradient + background-clip: text; 实现

原理:设置背景,通过设置 background-clip: text;, 设置背景被裁剪成文字的前景色。

文字渐变色
<template>
  <div class="demo-textGradientColor">
    <span>文字渐变色</span>
  </div>
</template>

<script>
export default {
  name: 'TextGradientColor'
}
</script>

<style lang="scss">
.demo-textGradientColor {
  margin-top: 20px;
  span {
    font-size: 46px;
    line-height: 72px;
    letter-spacing: 10px;
    color: transparent;
    background-image: linear-gradient(90deg, red 0%, orange 50%, green 100%);
    background-clip: text;
    font-weight: bold;
  }
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
上次更新: 2021-07-07 09:07:41
1px边框
展示小于12px文字

← 1px边框 展示小于12px文字→

最近更新
01
【uniapp】字节小程序BUG - “navigateToMiniProgram/getUserProfile:fail must be invoked by user tap gesture”
06-21
02
七牛云上传自有证书
04-27
03
使用腾讯云申请免费SSL证书
04-27
更多文章>
Theme by Vdoing | Copyright © 2020-2024 | 豫ICP备2020030395号 | 靳立祥 | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式