css-文字背景渐变色

复制代码
           -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-fill-color: transparent;
            display: inline-block;


//渐变色--水平方向

 background: linear-gradient(to right, #DF3000 0%, #DAD99A 51%, #00A5FF 100%);


//垂直方向
 background: linear-gradient(180deg, #ffffff 0%, #ffca24 100%);
  • linear-gradient 的角度参数:
    • 0deg:从下到上(垂直反向)
    • 90deg:从左到右(水平方向,默认)
    • 180deg:从上到下(垂直方向,你需要的效果)
    • 270deg:从右到左(水平反向)

水平示例图

垂直示例图

相关推荐
BingoGo2 小时前
CSS 也要支持 if 了 !!!CSS if() 函数来了!
前端·css
用户6600676685392 小时前
深入解析JavaScript数组:从内存原理到高效遍历实践
前端·javascript
用户12039112947262 小时前
CSS定位全解析:从静态到粘性,掌握元素布局的核心技巧
css
有点笨的蛋2 小时前
CSS 定位彻底搞懂:五种 position 的真实差异与最佳实践
前端·css
液态不合群2 小时前
数字化转型改变了什么?从技术底层到业务本质的深度重构
前端·人工智能·低代码·重构
qiao若huan喜2 小时前
9、webgl 基本概念 + 复合变换 + 平面内容复习
前端·javascript·信息可视化·webgl
梦幻通灵3 小时前
Edge浏览器好用插件【持续更新】
前端·edge
sTone873753 小时前
Chrome devtools二次开发准备:获取源码和编译
前端·google
龙泉寺天下行走3 小时前
[Powershell入门教程]第4天:模块、脚本编写、错误处理与 .NET 集成
java·服务器·前端