text-shadow过渡默认不生效是因为浏览器不支持多层阴影的插值计算，必须简化为单层阴影并仅调整模糊半径、rgba透明度或偏移量才能实现平滑过渡。
text-shadow 过渡为什么默认不生效
直接给 text-shadow 加 transition 却没反应？不是写法错，是浏览器根本不支持对复合值（比如多层阴影）做插值过渡。你写 text-shadow: 0 0 5px #ff0, 0 0 10px #ff0，浏览器无法在“两组阴影之间”平滑计算中间状态——它只认单个阴影的数值变化，且仅限于「同一结构」下的参数变动。
实操建议：
- 必须把
text-shadow声明简化为单层阴影（例如text-shadow: 0 0 5px #ff0），才能触发过渡 - 悬停时只修改其中可插值的参数：模糊半径（第三个值）、颜色透明度（用
rgba()）、或偏移量（前两个值） - 避免在初始态和悬停态使用不同数量的阴影层，否则过渡会跳变或完全失效
正确写法：用 rgba 颜色 + 模糊半径过渡
发光扩散效果本质是让光晕更“软”更“大”，靠增大模糊半径 + 提升颜色亮度/透明度最可控。用 rgba() 替代纯色，能通过 alpha 通道微调发光强度，避免悬停时颜色过曝。
示例代码：
立即学习“前端免费学习笔记（深入）”；
.glow-text {
color: #333;
text-shadow: 0 0 2px rgba(255, 215, 0, 0.3);
transition: text-shadow 0.3s ease;
}
.glow-text:hover {
text-shadow: 0 0 16px rgba(255, 215, 0, 0.8);
}关键点：
- 初始模糊半径建议 ≤ 3px，否则未悬停时已有明显光晕，失去对比
- 悬停时模糊半径别超过 24px，过大在高分屏上易发虚、边缘毛刺
-
rgba()的 alpha 值从 0.2–0.4 起步，悬停到 0.7–0.9，比全不透明更自然
兼容性与性能陷阱
老版本 Safari（≤15.4）对 text-shadow 过渡有渲染延迟，Chrome/Firefox 现代版基本无问题。但真正容易被忽略的是重绘开销——文字带大范围模糊阴影时，滚动或动画中可能掉帧。
优化建议：
- 给元素加
will-change: text-shadow（仅在必要交互前临时启用，避免常驻） - 避免在
body或大容器上批量应用该效果，优先作用于<span>或按钮类小范围文本 - 移动端慎用，iOS Safari 对大
text-shadow模糊半径的 GPU 加速支持不稳定，可能出现闪烁
想加“扩散感”？补一层轻微位移动画
纯 text-shadow 只能变大变亮，缺乏动态扩散的视觉暗示。可以在悬停时叠加极小的偏移（±0.5px）并配合缩放，欺骗人眼产生“向外涌出”的错觉。
示例追加：
.glow-text:hover {
text-shadow: 0 0 16px rgba(255, 215, 0, 0.8);
transform: scale(1.015); /* 配合偏移更自然 */
text-shadow: 0.5px 0.5px 16px rgba(255, 215, 0, 0.8);
}注意：
- 偏移量务必控制在 ±1px 内，超过就变成错位而非扩散
- 不要同时用
transform: scale()和大幅text-shadow，字体边缘可能糊得更严重 - 这个技巧适合标题或强调词，正文段落里加反而干扰阅读
实际效果是否“发光扩散”，取决于模糊半径变化幅度和颜色透明度的配合节奏。很多人卡在第一步——没意识到多层 text-shadow 会让过渡彻底失效。先砍成单层，再调参，比堆砌阴影层数更可靠。
