唯一可行路径是background-image+ -webkit-background-clip: text + color: transparent组合，缺一不可；Firefox至今不支持，需用SVG或逐字着色降级。
span + background-clip: text 是唯一可行路径
直接给 span 写 color: linear-gradient(...) 会完全无效——CSS 规范里 color 只接受单色值，不支持渐变。真正能用的方案只有一套组合：background-image 铺渐变 + -webkit-background-clip: text 裁剪到文字轮廓 + color: transparent 透出背景。
必须写全前缀和透明色，漏一个就失效
常见错误是只写 background-clip: text，但现代浏览器（Chrome、Edge、Safari）仍需 -webkit-background-clip: text 才能生效；Firefox 当前（2026年）依然不支持该特性，不能指望它显示渐变文字。
-
color: transparent不可省略，否则文字会盖住背景 -
background-image: linear-gradient(...)必须用background-image，写成background: linear-gradient(...)也可能被部分浏览器忽略（因简写可能覆盖background-color等隐式值） - 如果
span没设display: inline-block或类似触发渲染的属性，某些旧版 Chrome 下渐变可能不完整，建议加display: inline-block或确保父容器有明确字体设置
Firefox 不兼容时的替代思路
当目标用户包含 Firefox 用户，或需要稳定交付时，不要依赖 background-clip: text。可选方案只有两个：
- 用 SVG
<text>标签包裹文字，配合<linearGradient>和fill="url(#grad)"—— 兼容性好，但语义弱、SEO 不友好、无法继承父级字体设置 - 把每个字单独包一层
span，用 JS 或 CSS 动态分配不同颜色（如按字符索引映射到色表），适合短文本、可控场景，但不可缩放、无障碍支持差
别用 mask 方案：虽然理论上可行，但 -webkit-mask 同样缺乏 Firefox 支持，且伪元素 + content: attr() 在复杂 DOM 或 SSR 场景下容易失内容、难调试。
立即学习“前端免费学习笔记（深入）”；
渐变动画滚动效果要额外处理
单纯静态渐变文字没问题，但想实现“文字颜色随滚动/悬停流动”，得靠 background-position 动画驱动，不是改文字本身。
- 必须给
span加background-size: 200% 200%（至少大于 100%），否则动画没位移空间 - 动画定义在
@keyframes里控制background-position，例如0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } - 注意：动画不会自动绑定到文字内容上，它只是挪背景图位置；如果文字很长，可能需要调大
background-size值避免重复断层
真正难搞的不是写法，而是当页面启用暗色模式、或全局 CSS 变量动态修改根字号时，span 的实际渲染尺寸和渐变对齐会偏移——这时候只能靠 em 单位配 font-size 继承链手动对齐，没有通用解法。
