text-shadow语法为水平偏移、垂直偏移、模糊半径、颜色，前三个必为长度单位，颜色可选；支持负值与多层逗号分隔；单层用于轻量提示，多层可实现立体或描边但需防性能问题；IE9+和Safari5.1+支持，旧版存在rgba和多层兼容性限制。
text-shadow 的基本语法和参数顺序
直接写 text-shadow 就能生效，但参数顺序不能错：水平偏移、垂直偏移、模糊半径、颜色。前三个值必须是长度单位（px、em、rem），颜色可选，不写默认为当前文字色。
- 负值允许：比如
text-shadow: -2px 2px 1px #000表示向左下偏移 - 模糊半径为
0时无柔化，等于硬边投影；设为0 0 0 #fff实际上是“用纯白盖一层”，常用于遮挡抗锯齿毛边 - 多个阴影用逗号分隔，例如加描边效果：
text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000
单层阴影 vs 多层阴影的实际效果差异
单层阴影适合轻量提示（如按钮文字微浮起），多层叠加才能模拟真实立体感或描边。但要注意渲染开销——尤其在低性能设备上，叠加超过 4–5 层阴影可能引发文字重绘卡顿。
/* 单层：柔和提示 */
h1 { text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }
<p>/<em> 多层：立体字 + 描边 </em>/
.logo {
text-shadow:
0 0 8px #fff,
0 0 16px #fff,
0 0 24px #00aaff,
0 0 32px #00aaff,
0 0 40px #0055aa,
0 0 48px #0055aa,
0 0 56px #000;
}注意：所有值都用 0 水平/垂直偏移 + 递增模糊半径，才能形成“光晕”效果；一旦混入非零偏移，容易变成奇怪的拖影。
IE 和旧版 Safari 的兼容性坑
text-shadow 在 IE 9+、Safari 5.1+ 才完全支持。IE 9–10 不支持 rgba() 颜色里的 alpha 通道，写成 rgba(0,0,0,0.5) 会直接失效，得 fallback 成 #000 或用 filter: dropshadow()（仅 IE）。
立即学习“前端免费学习笔记（深入）”；
- Safari 5.0–5.0.5 对多层阴影解析异常，建议控制在 3 层以内
- 移动端 iOS 0 以外的值（即
text-shadow: 1px 1px 0 #000可用，1px 1px 1px #000会被忽略） - 如果设计要求强兼容，可用伪元素 +
transform: translate()模拟，但语义性和可访问性下降
和 box-shadow 混用时的层级与性能陷阱
文字阴影只作用于文字内容本身，不会影响容器盒模型；而 box-shadow 是画在元素框外的。两者同时存在时，text-shadow 始终在最上层渲染——这点常被误认为“被 box-shadow 盖住了”，其实只是视觉混淆。
- 避免对同一文字元素同时加大量
text-shadow和大范围box-shadow，GPU 渲染压力明显上升，滚动时易掉帧 - 动画中修改
text-shadow的模糊半径或颜色是高成本操作，比改color或opacity更耗资源 - 若只需“发光”效果，优先考虑
text-shadow而非给文字外层套空span再加box-shadow，后者增加 DOM 节点且难以精准对齐
真正难调的不是语法，而是阴影的“空气感”——偏移太小像没加，太大又像错位；模糊值稍高就糊成一片，稍低又显得生硬。多试两组数值，比查文档更管用。
