text-fill-color配合linear-gradient文字没变色，因仅webkit内核支持且需设-webkit-text-fill-color:transparent、background:linear-gradient()及-webkit-background-clip:text。
text-fill-color 配合 linear-gradient 为什么文字没变色
因为 text-fill-color 只在 WebKit 内核（chrome/safari/edge）生效，且必须配合 -webkit-text-fill-color: transparent 才能让渐变透出来。直接写 color: linear-gradient(...) 是无效的——css 的 color 属性不接受渐变值。
- 必须先设
-webkit-text-fill-color: transparent，再用background: linear-gradient(...)铺底 -
background-clip: text是关键，它让背景“裁剪”到文字形状内；没它，渐变只会铺满整个块级容器 - 记得加
-webkit-background-clip: text，旧版 Safari 不认标准属性 - 如果文字是链接或有伪类（如
:hover），需对每个状态单独设置，:hover里漏掉background-clip就会退化成纯色
webkit-mask-image 能不能替代 background-clip: text 做彩虹字
能，但没必要，还更麻烦。用 -webkit-mask-image 是把文字当蒙版扣出形状，再把渐变图层叠在后面——本质是绕路模拟，代码更长、调试更难，且 mask 对 SVG 或图片路径敏感，对纯文本支持反而弱。
- mask 方案需要额外一层包裹元素或伪元素，比如用
::before渲染渐变，再用mask-image把它“套”在文字上 - mask 的
luminance模式依赖灰度，若文字用了阴影（text-shadow）或描边，可能意外影响遮罩边缘 - 移动端 ios 15.4 之前，
mask-image在部分场景下有闪烁或渲染延迟，而background-clip: text兼容性更稳
彩虹文字在深色背景上发虚或边缘模糊
这是抗锯齿和 subpixel rendering 导致的，尤其在非整数缩放（如 125%）、Retina 屏或字体开启平滑时明显。渐变叠加透明文字，会让浏览器对每个颜色过渡做多次采样，边缘容易糊。
- 加
-webkit-font-smoothing: antialiased强制走灰阶抗锯齿，比默认的 subpixel 更干净 - 避免用太细的字体（如
font-weight: 100）或过小字号（font-size: 12px以下），渐变色带在窄笔画里会混色失真 - 如果用
text-shadow做描边增强对比，注意 shadow 模糊半径（blur-radius）别大于 1px，否则会吃掉渐变细节
要不要用 CSS @Property 做可动画的彩虹文字
要，但只在需要动态切换渐变方向或色标时才值得引入。单纯 hover 切颜色，用 transition + background-position 更轻量；想用 js 控制色相偏移（比如随时间旋转彩虹），@property 才显优势。
立即学习“前端免费学习笔记（深入）”；
- 定义注册属性：
@property --hue { syntax: "<number>"; inherits: false; initial-value: 0; }</number> - 渐变写成
background: linear-gradient(hsl(calc(var(--hue) + 0), 100%, 60%), hsl(calc(var(--hue) + 120), 100%, 60%), hsl(calc(var(--hue) + 240), 100%, 60%)); - JS 修改：
el.style.setProperty('--hue', newHue)，配合transition: --hue 0.3s就能平滑动 - 注意：firefox 目前不支持
@property用于自定义属性动画，得 fallback 到background-position平移方案
真正麻烦的是响应式重排后渐变错位，或者字体加载期间闪白——这些没法靠 CSS 解决，得配合 font-display: swap 和最小宽度占位。