纯CSS霓虹灯文字必须用3–4层text-shadow实现：第1层小模糊高亮色为灯管本体，第2–3层中模糊冷暖过渡色形成梯度，第4层大模糊低饱和粉/洋红模拟漫射；层数、模糊半径、颜色和字体均需严格匹配渲染逻辑与设备兼容性。
纯 CSS 实现霓虹灯文字，text-shadow 多层叠加是唯一可靠路径——不用 JS、不依赖 SVG，但必须严格控制层数、颜色饱和度、模糊半径和偏移量，否则不是“霓虹”，是“糊字”或“灰雾”。
为什么只用 text-shadow，且必须 3–4 层？
单层 text-shadow 只能模拟光晕边缘，缺乏由内而外的膨胀感；5 层以上在多数移动设备上会触发渲染降级（尤其微信内置浏览器），文字边缘发虚、帧率骤降。3–4 层是视觉层次与性能的平衡点：
- 第 1 层（最内）：小模糊（
1px）、高亮色（如hsla(240, 100%, 70%, 0.6)），充当“灯管本体” - 第 2–3 层：中等模糊（
2px→4px）、冷暖过渡色（青→紫），形成色温梯度 - 第 4 层（最外）：大模糊（
8px）、低饱和粉/洋红（hsla(330, 90%, 60%, 0.3)），制造环境光漫射
text-shadow 参数写错，霓虹就变“鬼火”
常见错误不是颜色选得丑，而是参数组合违反渲染逻辑：
- 所有层的
offset-x和offset-y必须为0，否则文字视觉重心偏移，光晕不对称 - 禁用
rgba(0,0,0,0.5)或任何含黑成分的颜色——它吸光，直接让霓虹发灰、发闷 - 模糊半径不能等比堆叠（如
2px、4px、6px），要跳档（1px→2px→4px→8px），否则中间层次塌陷 - 字体必须是粗体（
font-weight: 900）或无衬线体（font-family: 'Arial Black', sans-serif），细字体 + 大模糊 = 文字溶解
旧版 Safari 和微信浏览器里光效消失？不是代码问题
这是 Safari WebKit 渲染引擎的历史限制：早期版本对单个 text-shadow 声明中的阴影数量硬性截断（曾为 2 层）。虽已放宽，但在 iOS 15.4 以下、微信 8.0.32 之前版本仍 fallback 到首两层。
立即学习“前端免费学习笔记（深入）”；
- 真机测试不可替代：Chrome DevTools 的模拟器不触发该限制
- 降级方案不是删层，而是改写法：
text-shadow: 0 0 2px #00f, 0 0 12px #f0f—— 保留冷暖双核，牺牲中间过渡 - 小字号（
font-size < 14px）慎用8px模糊，高清屏上易被抗锯齿抹平
真正难调的从来不是颜色，是每一层模糊半径与字体大小的平方关系——16px 字用 8px 模糊刚好，换成 48px 字就得拉到 24px 模糊，否则光晕比例失衡。这个缩放系数没人告诉你，只能自己试。
