text-shadow实现彩虹发光需6层颜色按特定顺序叠加：红、橙、黄、绿、蓝、紫，偏移量±2px内，模糊4–8px，0px偏移的后两层补中心亮度；避免透明度和动态增减层数，safari性能受限时宜用svg替代。
text-shadow 实现彩虹发光的关键是颜色叠加顺序和偏移控制
彩虹发光不是靠单层 text-shadow，而是用多层红、绿、蓝（及过渡色如品红、青）按不同方向偏移+模糊度堆叠出来的视觉混合效果。浏览器会从上到下渲染每层阴影，所以顺序影响最终色彩层次——比如把 red 放最上层，容易吃掉下面的细节；反过来把 blue 打底、red 在顶，更接近光谱发散感。
- 偏移量建议控制在
-2px到+2px之间，太大容易出现明显色边，失去“发光”感 - 模糊半径统一设为
4px～8px，太小看不出渐变，太大则颜色糊成一团、失去彩虹辨识度 - 不要用
hsl()或rgba()动态生成——多数老版本 Safari 和部分安卓 WebView 对多层text-shadow中的透明度支持不稳定，直接写#ff0000、#00ff00更稳妥
实际可用的 6 层 text-shadow 写法（兼容 Chrome/Firefox/Safari）
以下这段能稳定出效果，已去掉冗余空格和换行，可直接复制进 CSS：
color: white; text-shadow: -2px -2px 4px #ff0000, 2px -2px 4px #ff6600, 2px 2px 4px #ffff00, -2px 2px 4px #00ff00, 0px 0px 6px #0066ff, 0px 0px 10px #9900ff;
注意：第 5、6 层用了 0px 0px 偏移 + 更大模糊值，这是为了补足中心亮度，让整体像“从字里透出光”。如果只用前 4 层，边缘有彩虹但中间发灰。
移动端 Safari 的 text-shadow 性能陷阱
iOS 15 之前，Safari 渲染多层 text-shadow 会触发软件合成（CPU 渲染），滚动或动画时掉帧明显。不是 bug，是 WebKit 的历史限制。
- 避免在
:hover或@keyframes里动态增减层数——这会强制重绘整段文字，卡顿比加一层阴影还严重 - 如果必须动画，改用
filter: drop-shadow()替代，但注意它不支持多层颜色，只能做单色发光 - 真要彩虹动效？用 SVG
<text></text>+<fegaussianblur></fegaussianblur>分通道叠加，可控性高，且 iOS 支持更好
为什么不用 background-clip + text-fill-color 模拟彩虹光？
有人试过用渐变背景裁剪文字再加外发光，看似聪明，但实际问题更多：
-
background-clip: text+text-fill-color: transparent在 Safari 下默认不触发硬件加速，文字边缘常有锯齿 - 叠加
text-shadow后，底层渐变和上层阴影会相互干扰，尤其在 Retina 屏上出现意外色带 - 无法单独控制每种颜色的模糊程度——而彩虹发光的本质，就是不同波长光的散射差异
真正难调的其实是蓝紫端那两层：人眼对短波长更敏感，稍一过量就刺眼。多数人失败，不是参数没写对，是盯着屏幕调了十分钟，把 #9900ff 调成 #cc00ff 还觉得“不够亮”，其实已经溢出了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
