单层 text-shadow 无法实现真实发光效果，必须叠加至少两层偏移为0、模糊半径递增、带透明度的颜色阴影，通过内层小模糊勾勒光核、外层大模糊扩散光晕，并依据背景色调整发光色与透明度，同时注意父容器裁切和移动端渲染限制。
单层 text-shadow 永远不会真正发光，必须叠至少两层、偏移全为 0 0、模糊半径递增、颜色带透明度的阴影才有效果。
为什么 text-shadow: 0 0 10px #fff 看起来只是糊边
浏览器渲染时，单层大模糊只生成一个均匀发散的“毛边”，缺乏光晕应有的明暗过渡和体积感。人眼识别“发光”依赖内核锐利 + 外晕柔和的层次结构——这只能靠多层叠加实现。内层小模糊（2px–4px）勾勒光核，外层大模糊（8px–20px）扩散光晕，两者颜色还必须有明度/透明度梯度。
- 写成
0 0 10px white会失效：纯色无 alpha，无法衰减，易过曝或隐形 - 用
rgba(255, 255, 255, 0.7)或hsla(240, 100%, 70%, 0.6)才可控 - macOS Safari 默认开启子像素抗锯齿，会吃掉小模糊细节；可临时加
-webkit-font-smoothing: antialiased测试
text-shadow 多层写法必须写全四个参数
漏掉任意一个值，整条声明会被浏览器静默忽略——不是效果弱，是直接不渲染。每层都得明确写出 offset-x、offset-y、blur-radius 和 color。
- ✅ 正确：
0 0 2px rgba(0, 100, 255, 0.6), 0 0 12px rgba(0, 200, 255, 0.4) - ❌ 错误：
0 0 2px #00f, 0 12px #0ff—— 第二层缺blur-radius，#0ff被当成模糊值解析 - 所有偏移必须是
0 0；写成+0 +0在旧版 Safari 可能解析异常 - alpha 值别低于
0.2，太低在 iOS Safari 上会不可见
深色背景 vs 浅色背景的配色逻辑完全不同
同一段 text-shadow 换个背景就失效，不是代码错，是光学对比失效。发光色不是复制文字色，而是反向适配背景并控制能量感。
- 深色背景（如
#111）：0 0 2px #0af, 0 0 12px rgba(0, 200, 255, 0.5)（青蓝系，高对比但不过曝） - 浅色背景（如
#f8f8f8）：0 0 3px rgba(0, 0, 0, 0.2), 0 0 8px rgba(0, 0, 0, 0.1)（压低明度+提高透明度，模拟“内敛发光”） - 禁用
rgba(0, 0, 0, 0.5)这类含黑颜色——它吸光，霓虹立刻发灰 - 字体本身颜色建议比发光色略深，比如白字配淡黄光，蓝字配青白光
父容器裁切和移动端渲染是两大隐形杀手
大模糊阴影本质是向外扩张的像素区域，一旦被截断，最外两层光晕就没了，看起来像“半截发光”。iOS Safari 对超大模糊（>12px）渲染不稳定，容易锯齿或闪烁。
- 检查
overflow: hidden、line-height过小、height固定等父容器限制 - 用 DevTools 查看 computed
overflow和盒模型，确认光晕是否被硬裁 - 移动端慎用
blur-radius > 12px；真机测试比模拟器靠谱得多 - 动画中别频繁重写全部 4–5 层值；只动一两个变量（如某层
blur-radius或alpha），否则低端 Android 易卡顿
最难调的从来不是参数数值，而是深色模式下背景与发光色的对比度塌缩，以及系统级字体抗锯齿对小模糊的吞没——这些必须在真机上逐项验证，不能只信开发者工具预览。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
