【CSS】实现文本颜色渐变

效果:

代码:

html 复制代码
<span 
 style="
    background: linear-gradient(45deg, #ff5847 20%, #d699fb 84%, #9177ff);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
">
    2025-02-05 17:14:44
</span>

background-clip 常用值

效果
border-box 背景延伸到边框外边缘(默认值)。
padding-box 背景延伸到内边距(padding)外边缘,不包含边框。
content-box 背景仅覆盖内容区域,不包含内边距和边框。
text 背景被裁剪为文字的前景色(需配合 -webkit-text-fill-color: transparent)。 WebKit/Blink 浏览器(Chrome、Safari、Edge)需要 -webkit- 前缀,Firefox 直接支持。
-webkit-text-fill-color

一个 WebKit 浏览器特有的 CSS 属性,用于设置文本的填充颜色。会覆盖 color 属性的值。

-webkit-background-clip: text 结合使用时,可以创建文字渐变效果。

相关推荐
Liudef062 小时前
儿童趣味记忆配对游戏
css·游戏·css3
吉吉安10 小时前
两张图片对比clip功能
javascript·css·css3
快起来别睡了12 小时前
CSS 层叠上下文:从“谁在前,谁在后”说起
css
国家不保护废物14 小时前
多模态模型数据传输的秘密武器:html5对象Blob深度解析
前端·面试·html
南方kenny14 小时前
前端小知识:搞懂 BFC块级格式化上下文,告别面试“拦路虎”!
前端·css·面试
学长学姐我该怎么办14 小时前
从零开始学前端html篇2
前端·html
程序员秘密基地15 小时前
基于html,css,vue,vscode,java,springboot,mysql数据库,在线考勤,管理系统
java·vue.js·spring·html·web app
杨超越luckly17 小时前
HTML应用指南:利用GET请求获取全国山姆门店位置信息
信息可视化·数据分析·html·argis·门店
尘心cx17 小时前
前端-HTML-day2
前端·html
爱编程的喵17 小时前
CSS动画实战:从零打造一个超萌的小球亲亲动画
前端·css