单层text-shadow无法真正发光，必须用至少两层零偏移、不同模糊半径、带透明度的颜色叠加模拟光晕梯度；内层小模糊定亮度，外层大模糊撑体积，禁用纯色，须用rgba/hsla并严格遵循四值语法。
单层 text-shadow 永远不会真正发光，它只是边缘发虚；必须用至少两层、零偏移、不同模糊半径、带透明度的颜色叠加，才能骗过人眼的视觉系统，模拟出光晕的明暗过渡和体积感。
为什么 text-shadow: 0 0 10px #fff 看起来像糊边而不是发光
浏览器渲染时，text-shadow 是逐层绘制的。单层大模糊（比如 0 0 10px #fff）只产生一个均匀“毛边”，缺乏内核与外晕的层次——人眼识别“光”依赖的是由实到虚、由亮到淡的梯度。没有这个梯度，就是失焦，不是发光。
- 内层小模糊（
0 0 2px～4px）负责勾勒光核，决定亮度集中度 - 外层大模糊（
0 0 8px～20px）负责扩散光晕，决定体积感和氛围 - 所有层的前两个参数（
offset-x和offset-y）必须严格为0，写成+0或空格不一致都可能在旧 Safari 中失效
text-shadow 多层写法的硬性规则
每层阴影必须完整写出四个值：水平偏移、垂直偏移、模糊半径、颜色。漏掉任何一个，后面的内容会被错误解析，整条声明可能静默失效。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- ✅ 正确：
0 0 2px hsla(240, 100%, 70%, 0.6), 0 0 4px hsla(270, 90%, 60%, 0.4) - ❌ 错误：
0 0 2px #00f, 0 4px #00f（第二层缺offset-y，#00f被当成了模糊值） - 禁用纯色如
#fff或black——它们没有 alpha 通道，无法模拟光线衰减；必须用rgba()或hsla() - alpha 值别低于
0.2，尤其在 Safari 上，0.1可能直接不可见
深色背景 vs 浅色背景的配色逻辑
同一段 text-shadow 在白底和黑底上效果可能完全相反：不是调得不够，而是方向反了。
- 深色背景（如
#111）：可用高对比暖白或青蓝，例如0 0 2px rgba(255, 215, 0, 0.9), 0 0 8px rgba(100, 200, 255, 0.5) - 浅色背景（如
#f8f8f8）：不能用亮色堆叠，否则刺眼或“过曝”，改用低饱和黑灰，例如0 0 3px rgba(0, 0, 0, 0.2), 0 0 8px rgba(0, 0, 0, 0.1) - 文字本体颜色建议比最内层发光色略深/略暗，比如白字配淡黄光，蓝字配青白光，避免“光吃掉字”
移动端和 Safari 的真实陷阱
真机测试比 DevTools 模拟重要十倍。微信内置浏览器、低端安卓 WebView、iOS 14 以下 Safari 对多层 text-shadow 有硬限制，不是“不支持”，而是“只渲染前两层”或“帧率骤降”。
- 超过 4 层或单层
blur-radius > 20px，iOS Safari 可能闪烁或掉帧 - macOS 上若发光不清晰，大概率是子像素渲染干扰，临时加
-webkit-font-smoothing: antialiased;关闭即可 - 父容器设了
overflow: hidden？光晕被裁掉是最常被忽略的布局问题 - 小字号（
font-size ）下，<code>blur-radius 的层在 Retina 屏上会消失，别白费劲
真正难的不是写对语法，而是让光晕在各种设备、各种背景、各种字号下都“稳住不塌”——这需要你把每一层的模糊半径、透明度、色相都当成可调参数，而不是复制粘贴完就收工。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
