bootstrap 5 不提供文字阴影工具类，需手写 text-shadow；shadow-sm 等作用于盒模型，不影响文字本身，真正生效的是直接作用于字体渲染层的 text-shadow。
Bootstrap 5 本身不提供文字阴影工具类，必须手写 text-shadow；所谓“优缺点”本质是 text-shadow 的能力边界，不是 Bootstrap 的设计缺陷。
为什么不能直接用 shadow-sm 给文字加阴影
shadow-sm 等类作用于整个元素的盒模型（box-shadow），它会在元素外绘制一层投影，对文字本身无影响。把 shadow-sm 加在 <h1></h1> 上，阴影是围在整块标题容器外围的，文字边缘依然发虚——尤其当背景是深色图片或渐变时，可读性反而下降。
- 常见错误现象：
<h2 class="shadow-sm text-white">标题</h2>在深色卡片上看起来“没质感”，其实阴影根本没盖到文字上 - 真正起作用的是
text-shadow，它直接作用于字体渲染层，和color同级 - 别试图用
filter: drop-shadow()替代——它会关闭抗锯齿，Chrome 下小字号文字边缘毛刺明显
text-shadow 的推荐写法与单位陷阱
标准值如 text-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.2) 是经过验证的 Bootstrap 风格适配写法，但单位和透明度稍有偏差就会翻车：
- 必须用
rem，不用px：否则缩放页面或切换系统字体大小时，阴影比例失调，大屏上看像描边，小屏上消失 - 透明度控制在
0.1–0.3：超过0.3在 Windows 渲染下易显“脏”，低于0.08基本检测不到效果 - 模糊半径（第三个值）别超
0.25rem：细体字（font-weight: 300）用0.1rem更安全，否则字干被吃掉 - 深色背景 + 浅色文字场景下，单层阴影不够，建议双层：
text-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 -1px 1px rgba(255,255,255,0.1)
和 Bootstrap 类组合时最常踩的覆盖坑
直接写 <h1 class="text-white text-shadow-sm"></h1> 很可能失效，不是你 CSS 写错，而是加载顺序或权重问题：
-
.text-white带!important，若你的.text-shadow-sm定义在 Bootstrap CSS 之前，会被覆盖 - 避免用组合选择器如
.h1.text-shadow-sm，改用独立类名 + 后置加载（确保自定义 CSS 在 bootstrap.css 之后引入） - 别在 HTML 里写内联样式：
style="text-shadow: ..."—— 无法响应式、无法复用、后期维护成本爆炸 - 响应式断点里记得重置：比如
@media (max-width: 768px)中把模糊半径减半，否则小屏下阴影糊成一团
可访问性与性能上容易被忽略的细节
text-shadow 本身几乎零性能开销，但有两个隐形雷区：
- WCAG 对比度检测工具（如 axe 或 Lighthouse）完全忽略
text-shadow，只计算文字色与背景色的 RGB 差值。加了阴影不代表通过 AA/AAA 标准，该调对比度还得调 - 配合
transform或animation使用时，频繁重绘可能触发 GPU 合成层切换，低端设备卡顿——纯静态文字没问题，动态标题慎用 - 屏幕阅读器不感知阴影，但它会影响视觉用户的判断。比如浅灰字+浅灰阴影+白背景，正常人看着费劲，而辅助工具测出来“对比度合格”，这种割裂要人工校验
真正复杂的是场景判断：同一段文字，在深色模式下需要阴影，在浅色模式下可能得关掉；叠加在图片上要加两层，在纯色背景上一层就够。没有一劳永逸的 class，只有贴着具体上下文调的值。
