text-shadow 是唯一稳定实现文本阴影和发光的 CSS 方案，必须严格遵循四值顺序、多层跳档模糊、适配背景色与系统限制，并注意 Tailwind 中的语法细节。
text-shadow 是唯一能稳定实现文本阴影和发光的 CSS 方案，别试图用 filter: drop-shadow() 或 box-shadow 替代——它们要么不作用于文字，要么层次错乱、裁剪失真。
text-shadow 参数顺序写错就失效
浏览器只认固定四值顺序：h-offset v-offset blur-radius color。漏一个或顺序错，整条声明静默失效。
-
text-shadow: 2px 2px 4px #000✅ 正常黑影 -
text-shadow: 2px #000❌ 浏览器把#000当成blur-radius，文字发虚但无阴影 - 发光必须所有层
h-offset和v-offset都为0，否则光晕偏移、“字飘了”
多层叠加才能做出真实发光感
单层大模糊（比如 text-shadow: 0 0 20px #fff）边缘糊、像素溢出、Retina 屏上失控。真正可用的发光是 2–3 层跳档模糊 + 透明度衰减。
- 第一层：内核，
0 0 1px hsla(240,100%,70%,0.6) - 第二层：主体，
0 0 4px hsla(240,100%,60%,0.4) - 第三层（可选）：外晕，
0 0 8px hsla(240,100%,50%,0.2) - 禁用命名色（如
blue）和含黑值的rgba(0,0,0,0.x)，深色背景下直接不可见
发光在深色背景上消失？不是没生效，是颜色错了
默认用 rgba(0,0,0,0.3) 给白字加光，在黑底上对比度崩塌——阴影和文字融为一体，肉眼看不见。
立即学习“前端免费学习笔记（深入）”；
- 深色背景必须用浅色光：
hsla(0,0%,100%,0.6)或rgba(255,255,255,0.8) - 高对比度模式下（Windows 系统设置），
text-shadow会被强制禁用，这是系统级可访问策略，无法绕过 - 大段正文别加发光，尤其带 blur 的，低端屏会明显卡顿；hover 动画建议改用
will-change: text-shadow或换filter: drop-shadow()（仅限简单场景）
Tailwind 中写 text-shadow 容易踩空格和括号坑
Tailwind 默认不支持 text-shadow 工具类，必须用 arbitrary value 语法，且解析器极敏感。
- 空格全得换成下划线：
text-[0_0_2px_rgba(255,255,255,0.8)]，不能留空格 - 括号内逗号保留，但不能写成
hsla(240_100%_70%_0.6)—— 正确是hsla(240,100%,70%,0.6) -
text-[0_0_4px]缺 color 会失效；text-[0_0_1px_#fff]在
最常被忽略的点：发光效果的“厚度”不在模糊值大小，而在每层 blur-radius 是否严格跳档（1→4→8）、color 透明度是否逐层衰减。调参时盯着像素边缘看，而不是只看整体亮度。
