文字颜色渐变需用背景渐变+透明文字实现，因color不支持linear-gradient；核心是background-image、-webkit-background-clip: text、background-clip: text和-webkit-text-fill-color: transparent四属性配合，并设display为block/inline-block。
文字本身不能直接做颜色渐变过渡，color 属性不接受 linear-gradient()，浏览器会静默丢弃该声明——你在 DevTools 里看到它被划掉，但控制台不报错。真正可动画、可落地的方案，是用 color 控制显隐，把渐变“藏”在背景里。
为什么 color: linear-gradient() 无效
CSS 的 color 是单色属性，只接受 #fff、rgb(0,0,0)、hsl() 这类 <color> 类型值。linear-gradient() 返回的是 <image>，类型不匹配，语法非法。不是兼容性问题，是根本不可用。
-
-webkit-text-fill-color: linear-gradient()同样无效，Safari 下还可能渲染异常 - 给
background-image加transition？浏览器直接忽略，动画不会触发 - 试图靠
@keyframes动background-position模拟流动？iOS Safari 滚动时会反复光栅化，导致闪白或卡顿
可用且稳定的渐变文字过渡方案
核心思路：渐变画在背景上，用可动画的 color 做“开关”。初始态文字纯色盖住背景；过渡中 color 线性变透明；终态文字镂空，渐变从字形中透出。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 必须四行齐备：
background-image: linear-gradient(...)+-webkit-background-clip: text+background-clip: text+-webkit-text-fill-color: transparent - 元素需设
display: inline-block或block，inline元素不支持background-clip: text - 过渡只需写
transition: color 0.4s ease，别碰 background 相关属性 - 方向参数不能省：
to right或90deg必须显式写出，空字符串或留空会导致 iOS Safari 和 Android WebView 失效
淡入淡出类文字过渡（非渐变）
如果只是要文字出现/消失的平滑切换，不用渐变，那更简单可靠：
立即学习“前端免费学习笔记（深入）”；
- 用
opacity+visibility配合transition，比如transition: opacity 0.3s ease, visibility 0.3s - 避免只用
opacity，否则透明文字仍占可访问性焦点；加visibility: hidden才真正移出交互流 - 触发前先强制重排（如读取
offsetHeight），确保浏览器重置过渡状态，否则首次动画可能不触发 - 若配合 JS 切换内容，监听
transitionend再操作 DOM，比用setTimeout更精准
最易被忽略的点：父容器若有背景色，必须设 background-color: transparent，否则会遮住底层渐变；渐变色标别超 3 个，5 色停靠点在低端机上性能下降明显。
