纯css实现文字渐变、发光、流光效果原理不同且不可混用：渐变需background-image+background-clip:text+-webkit-text-fill-color:transparent；发光靠多层text-shadow；流光依赖background-position动画，三者叠加会导致失效或文字消失。
纯CSS能实现文字渐变色、发光、流光三种效果，但它们原理不同、不能混用同一套属性；强行叠加会导致部分浏览器失效或文字消失。
background-clip: text 实现渐变色文字
这是最稳定、语义最干净的渐变方案，文字仍是可选、可复制、可被屏幕阅读器识别的文本节点。
- 必须同时设置
background-image: linear-gradient()（或radial-gradient()）和-webkit-background-clip: text，缺一不可 -
-webkit-text-fill-color: transparent是关键，color: transparent在 Safari 16.4+ 和部分安卓 WebView 中会彻底隐藏文字（连背景都不显示） - 不要给父容器设
overflow: hidden，否则 Safari 下文字边缘可能被意外裁剪 - 回退方案建议写成：
color: #333; background-image: ...; -webkit-background-clip: text; -webkit-text-fill-color: transparent;—— 这样旧浏览器看到纯色，新浏览器才启用渐变
text-shadow 实现静态/动态发光效果
发光本质是多层阴影叠加，不是“背景透出”，所以它和 background-clip 方案互斥，不能套在同一个元素上。
- 单层阴影如
text-shadow: 0 0 8px #ff00ff效果弱；推荐三层递进：0 0 4px #ff00ff, 0 0 8px #ff00ff, 0 0 12px rgba(255,0,255,0.6) - 想让发光“呼吸”动起来？用
@keyframes动画控制text-shadow的模糊半径和透明度，但注意：Chrome 对text-shadow动画的 GPU 加速支持不稳定，动画帧率可能掉到 30fps 以下 - 避免对大段正文使用发光，易造成阅读疲劳；只用于标题、按钮、徽章等小范围强调场景
background-position + animation 实现流光字效
所谓“流光”，其实是让一个宽幅渐变背景在文字区域内横向滚动，制造光线扫过的感觉。
- 核心三步：
background-size: 200% 200%（扩大背景范围）、background-position: 0 0→-100% 0（位移触发流动）、animation: name 3s linear infinite - 必须配合
-webkit-background-clip: text和-webkit-text-fill-color: transparent，否则只是 div 背景在动，文字不动 - 流光方向由
linear-gradient的角度决定：写to right是左→右流光，to left是右→左；若用角度如45deg，流光会斜向移动，但容易让文字首尾颜色错位 - 动画时长别低于 2s：太快显得躁，太慢（>5s）会让用户感知不到“流动”，建议 2.5–3.5s 区间微调
最容易被忽略的一点：所有这些效果在深色背景上表现力强，在浅底色上可能发灰甚至不可见；务必在真实页面上下文中预览，而不是只看 CodePen 单例。另外，iOS Safari 对 background-clip: text 的硬件加速有 Bug，快速滚动页面时可能出现文字闪烁——此时加 will-change: transform 或用 transform: translateZ(0) 强制 GPU 层可缓解。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
