text-shadow必须写全三个参数（水平偏移、垂直偏移、模糊半径），缺一则阴影可能不可见或失真；常用起点为text-shadow: 2px 2px 4px #333；负值控制方向，模糊半径不能为负；多层叠加可实现立体效果，但不宜超4层；注意SVG兼容性、CSS重置干扰、性能开销及高对比度模式下失效问题。
text-shadow 基础写法：三个参数缺一不可
不填全 text-shadow 的三个值（水平偏移、垂直偏移、模糊半径），阴影就可能看不见或错位。浏览器会把缺失的值当作 0，但模糊半径为 0 时，阴影边缘生硬、没立体感，容易被误认为是文字描边。
-
text-shadow: 2px 2px 4px #333;是最常用起点：向右下偏移 2px，模糊 4px，形成自然下沉感 - 第一个值为负（如
-1px）会让阴影往左；第二个值为负（如-1px）往上，可模拟高光 - 模糊半径不能为负，设成
-2px会被整个忽略，样式失效
叠加多层 text-shadow 实现真正立体效果
单层 text-shadow 只能模拟简单投影，要做出浮雕、按钮压感或金属字效果，必须叠 2–4 层。每层控制不同方向和强度，才能骗过人眼的深度感知。
- 基础浮雕：用一层浅色上阴影 + 一层深色下阴影，例如
text-shadow: -1px -1px 1px #fff, 1px 1px 1px #333; - 避免过度叠加：超过 4 层不仅难以调试，还会在低端设备上引发渲染卡顿，尤其在滚动区域里
- 注意颜色对比：深色背景上用浅色阴影更易见，但若
#fff太亮，可能像发光而非立体——试试#eee或加点透明度（rgba(255,255,255,0.7)）
兼容性与性能陷阱：哪些地方会悄悄失效
text-shadow 在现代浏览器中支持良好，但有两个真实场景容易翻车：SVG 内文本和某些 CSS 重置库干扰。
- SVG 中的
<text></text>元素需单独声明text-shadow，它不继承父容器样式，且 IE 完全不支持 - 一些 UI 框架（如 Normalize.css）会把
text-shadow重置为none，检查 computed styles 时发现“明明写了却没影子”，大概率是被覆盖了 - 动画中频繁修改
text-shadow（比如 hover 时从 0 层变到 3 层）会触发重排，比改color或transform更耗性能
替代方案提醒：text-shadow 不是万能的
想实现内凹、蚀刻或带材质质感的文字？text-shadow 很难干净做到。它本质是“外发光式投影”，所有阴影都在文字轮廓之外。
立即学习“前端免费学习笔记（深入）”；
- 内阴影（inset）效果无法用
text-shadow实现，得靠background-clip: text+-webkit-text-fill-color: transparent配合渐变背景 - 需要响应式缩放时，像素值（如
2px）不会随字体缩放，建议用em或rem单位，比如0.1em 0.1em 0.2em #000 - 高对比度模式下，部分系统会强制关闭
text-shadow，这不是 bug，是可访问性策略——别依赖阴影传递关键信息
