text-shadow 必须按水平偏移、垂直偏移、模糊半径、颜色顺序书写；多层叠加可模拟发光，需模糊半径递进、透明度衰减；注意高对比度模式禁用、性能开销及可访问性问题。
text-shadow 的基本写法和参数顺序
直接写 text-shadow 时，浏览器只认固定顺序的四个值：水平偏移、垂直偏移、模糊半径、颜色。漏掉任意一个中间值（比如只写两个），后面的颜色就会失效或被当成模糊半径处理。
-
text-shadow: 2px 2px 4px #000✅ 正常黑影 -
text-shadow: 2px #000❌ 浏览器把#000当成模糊半径，文字变模糊但无阴影 -
text-shadow: 0 0 8px #ff6b6b, 0 0 16px #ff6b6b✅ 多层叠加实现“发光”感
用多层 text-shadow 模拟发光效果
纯色发光不是靠一层大模糊，而是叠 2–3 层不同模糊半径的同色阴影。层数太少没厚度，太多会糊成一团，且影响渲染性能。
- 第一层：小偏移 + 小模糊（
0 0 2px），定义光晕内核 - 第二层：相同偏移 + 中等模糊（
0 0 6px），撑开光晕主体 - 第三层（可选）：更大模糊（
0 0 12px），但颜色要稍淡（如rgba(255, 107, 107, 0.6)），避免边缘生硬 - 别用
text-shadow: 0 0 20px #fff单层——边缘发虚、边缘像素溢出、在 Retina 屏上更难控制
兼容性和可访问性隐患
text-shadow 在 IE9+ 和所有现代浏览器都支持，但有两个实际坑点容易被忽略：
- 高对比度模式下（Windows 系统设置），部分浏览器会强制禁用
text-shadow，发光消失——这不是 bug，是系统级可访问策略，无法绕过 - 使用
text-shadow做“白字黑底+白光”时，如果阴影太厚，可能让文字在暗色背景上显得膨胀、虚化，实际可读性下降 - 动画中频繁修改
text-shadow（比如 hover 发光变化）会触发重绘，低端设备可能出现卡顿；建议用will-change: text-shadow或改用filter: drop-shadow()替代（但注意drop-shadow()作用于整个元素盒，不是纯文字）
替代方案：什么时候不该用 text-shadow
当需要精确控制光晕形状、支持透明背景裁剪、或配合 SVG 图标统一发光风格时，text-shadow 就力不从心了。
立即学习“前端免费学习笔记（深入）”；
- 图标+文字组合发光：用 SVG 的
<filter></filter>+<fedropshadow></fedropshadow>更一致 - 文字带描边又发光：
text-stroke和text-shadow叠加容易错位，优先考虑paint-order: stroke fill+ filter - 需要响应式发光强度（比如随字号缩放）：
text-shadow的像素值不会自动缩放，得配合calc()或 JS 动态计算
