真正流光效果需 background-image + background-clip: text + animation，text-shadow 仅能模拟静态阴影；safari 需 -webkit- 前缀及 -webkit-text-fill-color: transparent；firefox 不支持，须 svg/canvas 降级；动画宜用 background-size 配合像素位移，渐变色带需足够宽，时长 3s–6s 为佳。
text-shadow 无法实现真正的流光效果，别白费劲
纯 text-shadow 只能堆叠静态阴影，所谓“流光”只是错觉；真正动态位移的流光必须靠 background-image + background-clip: text 配合 animation 移动渐变背景位置。
background-clip: text 在 Safari 里默认不生效
这个属性在 Safari（尤其 iOS 15.4 之前）需要加 -webkit-background-clip: text，且必须配合 -webkit-text-fill-color: transparent 才能显示。漏掉任一，文字直接变黑块或消失。
-
-webkit-background-clip: text和background-clip: text要同时写，前者放前面 -
-webkit-text-fill-color: transparent不可省略，否则背景被文字颜色盖住 - Firefox 目前仍不支持
background-clip: text，需用 SVG 或 canvas 降级
linear-gradient 背景位移动画卡顿或跳帧
直接对 background-position 做 % 动画容易因浏览器重排导致掉帧；更稳的方式是用 background-size 配合固定像素位移，或改用 transform: translateX() 模拟流动感。
- 推荐写法：
background-size: 200% 100%+background-position: -100% 0→0 0 - 避免用
vw或rem单位做background-position动画，缩放时会失步 - 加上
will-change: background-position对部分 Chrome 版本有帮助，但别滥用
渐变色带太窄导致流光不明显
很多教程用 linear-gradient(90deg, #ff0080, #3300ff, #0080ff) 这类三色点，结果色带过渡生硬、流动感弱。关键不是颜色多，而是每段渐变区间要足够宽，让位移过程能被肉眼捕捉。
立即学习“前端免费学习笔记（深入）”；
- 把中间色扩展成区域：比如
#ff0080 0%, #ff0080 20%, #3300ff 50%, #0080ff 80%, #0080ff 100% - 总背景宽度建议设为
background-size: 300% 100%，给动画留足缓冲空间 - 动画时长控制在
3s–6s，太快看不出流动，太慢像静止
最麻烦的其实是 Firefox 兼容和 Safari 的私有前缀组合，写一遍就得测三端，稍一漏就白屏——别信“一份代码全端通”，这玩意儿天生带平台裂痕。
