text-shadow专用于文字阴影，必须按“水平偏移、垂直偏移、模糊半径、颜色”顺序书写且缺一不可；三层叠加（高光、主影、深影）可实现立体浮起效果，需注意背景配色、语法错误、overflow裁剪及字体渲染等常见失效原因。
直接用 text-shadow 就行，它是专为文字设计的阴影属性，box-shadow 对标题文字无效——它只套容器边框，不作用于文字本身。
基础写法必须守顺序
每层阴影都得按「水平偏移、垂直偏移、模糊半径、颜色」严格书写，缺一不可，顺序错就完全不生效：
-
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);✅ 正确（省略 color 时用文字色，但建议显式写出） -
text-shadow: #000 2px 2px;❌ 颜色提前，整条被忽略 -
text-shadow: 2px 2px 0;❌ 没颜色，浏览器当无效值处理 -
text-shadow: 2px 2px -2px #000;❌ 模糊半径不能为负，声明失效
让标题真正“浮起来”的三层立体写法
单层只能做平面投影；要立体感，至少叠加三层，模拟统一光源和景深衰减：
- 高光层：
0 -1px 1px rgba(255,255,255,0.7)（顶部浅色，小模糊） - 主影层：
1px 1px 2px rgba(0,0,0,0.3)（中灰，适中模糊） - 深影层：
2px 2px 4px rgba(0,0,0,0.2)（深灰，略大模糊）
三者用逗号分隔，写在同一行：text-shadow: 0 -1px 1px rgba(255,255,255,0.7), 1px 1px 2px rgba(0,0,0,0.3), 2px 2px 4px rgba(0,0,0,0.2);
背景不同，配色逻辑完全不同
阴影不是越黑越重，而是要让字从背景里“跳出来”：
立即学习“前端免费学习笔记（深入）”；
- 深色背景（如 #1a1a1a）：用浅色高光为主，例
text-shadow: 0 0 6px rgba(255,255,255,0.6); - 浅色背景（如 #f8f9fa）：用深灰主影+略深底影，例
text-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.2); - 别用纯黑 #000 或纯白 #fff——它们在同色背景下等于隐形
常见“写了没效果”的真实原因
语法正确却看不见？大概率是这几点挡住了：
- 父容器设了
overflow: hidden，而阴影（尤其大模糊或负偏移）被裁掉 - 标题用了
color: transparent或rgba(0,0,0,0)，没文字色就没阴影载体 - 字体太细（font-weight: 300）或字号太小（≤14px），加厚阴影反而糊成一团
- 在 macOS Safari 下启用了
-webkit-font-smoothing: antialiased，会削弱阴影对比度
