color属性不支持渐变值，因其仅接受单色；正确方案是background-image设渐变，配合background-clip:text和color:transparent实现过渡效果。
不能直接对 color 设置渐变值，也不能靠 -webkit-text-fill-color: linear-gradient() 实现过渡——浏览器会静默忽略，文字变成默认色或全黑。
为什么 color: linear-gradient() 无效？
CSS 的 color 属性只接受单色（如 #fff、rgb(0,0,0)），而 linear-gradient() 返回的是 <image> 类型。浏览器看到类型不匹配，直接丢弃该声明，开发者在 DevTools 里会发现这行被划掉，但控制台不报错。
常见误判是以为兼容性问题，其实是语法非法。
- 写
color: linear-gradient(to right, red, blue)→ 文字不变色，或回退为color: inherit - 用
-webkit-text-fill-color: linear-gradient(...)→ 同样无效，且 Safari 可能渲染异常 - 试图给
background-image加transition→ 浏览器完全忽略，动画不触发
真正可过渡的方案：用 color 控制显隐，用 background-clip: text 显渐变
核心思路是把渐变做在背景上，再用可动画的 color 属性“开关”文字显示状态：白色 → 透明，视觉上就是“从实色切到渐变”。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 初始态：
color: white，盖住底层渐变，文字纯白 - 过渡中：
transition: color 0.4s ease，color线性变化 - 终态：
color: transparent，文字镂空，渐变背景透过字形显现 - 必须配齐四行才能稳：
background-image: linear-gradient(...)+-webkit-background-clip: text+background-clip: text+-webkit-text-fill-color: transparent - 元素需设
display: inline-block或block，inline元素不支持background-clip: text
移动端渐变文字闪烁？先关掉 background-position 动画
iOS Safari 在滚动或重绘时，会对含 background-position 动画的 background-clip: text 元素反复光栅化，导致闪白或卡顿。这不是代码写错，是渲染管线缺陷。
- 避免用
@keyframes驱动background-position做流动效果 - 真要动，改用
filter: hue-rotate(0deg)动画，开销低、无闪烁 - 渐变色标别超过 3 个，
linear-gradient(to right, #f00, #0f0, #00f)比五色停靠点快 40%+ - 父容器若有背景色，记得设
background-color: transparent，否则会遮住渐变层
动态生成渐变字符串时，空格和方向是硬伤
linear-gradient() 的语法容错率极低，尤其在 iOS Safari 和 Android WebView 中：
- 方向参数不能省略：必须写
to right或90deg，不能留空或传空字符串 - 颜色之间必须有且仅有一个空格：
linear-gradient(to right, #f00, #0f0)✅；linear-gradient(to right,#f00,#0f0)❌（逗号后缺空格） - 颜色格式不自动转换：输入
rgba(255,0,0,0.8)就不能转成#ff0000，否则透明度丢失，出现视觉断层 - JS 拼接时务必校验括号闭合、空格、方向值；手写建议复制完整模板再改颜色，别肉眼改
最易被忽略的点是：过渡是否真的依赖 color，而不是幻想某个属性能“直接渐变”。所有稳定落地的方案，都绕不开“背景渐变 + 文字透明 + color 显隐切换”这个铁三角。漏掉任意一环，要么不动，要么闪，要么全黑。
