text-shadow用于强化段落视觉权重与情绪表达，推荐简洁单层或双层阴影适配不同语义场景，并需规避overflow:hidden裁切、文字透明、字体平滑削弱等常见失效问题。
用 text-shadow 给段落（<p></p>）加阴影，不是为了炫技，而是让关键段落“浮出来”——比如引文、警示语、金句或章节导语。它不改变结构，但能立刻强化视觉权重和情绪表达。
基础阴影：让文字稳稳立住
小字号段落（14–18px）不适合大模糊，否则字迹发虚。推荐简洁投影：
-
text-shadow: 1px 1px 1px rgba(0,0,0,0.15);—— 深色背景上提神，浅色背景上增稳 - 避免纯黑
#000：在白底上太刺眼，改用rgba(0,0,0,0.2)更柔和 - 若段落行高紧凑，垂直偏移建议≤1px，防止阴影重叠干扰阅读节奏
多层叠加：制造轻量立体感
两层阴影比一层更有厚度，且不增加渲染负担：
-
text-shadow: 0 1px 0 #fff, 0 2px 2px rgba(0,0,0,0.15);—— 上层浅色提亮边缘，下层微灰压出深度 - 顺序很重要：前面的阴影在底层，后面的覆盖其上；想突出“浮起”，就把浅色放前、深色放后
- 中文段落慎用左右对称大偏移（如±2px），易造成笔画断裂感；优先用“下+微糊”组合
场景化适配：不同段落用不同阴影逻辑
不是所有段落都适合同一种阴影，要匹配语义：
-
引文/诗句段落：用柔光外晕
text-shadow: 0 0 8px rgba(100,100,150,0.3);，营造氛围感，不抢内容 -
警告/重点提示：单向强对比
text-shadow: 2px 2px 0 #d32f2f;（无模糊+红色偏移），强化紧迫性 -
深色模式下的段落：避免用
#fff做阴影，改用rgba(255,255,255,0.12)防光晕，同时检查父容器是否设了overflow: hidden——裁掉阴影就等于没加
避坑提醒：写了却看不见？先查这三点
90% 的“无效阴影”不是代码错，而是被环境吞掉了：
- 段落父容器设置了
overflow: hidden，尤其带圆角或 flex 容器时，阴影常被意外裁切 - 段落本身
color是transparent或rgba(0,0,0,0)——text-shadow 不会自己显形，它必须依附于可见文字 - 用了
-webkit-font-smoothing: antialiased（尤其 macOS Safari），会削弱阴影对比度；可临时加text-shadow: 0 0 1px currentColor;救急
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
