Bootstrap 5 默认不提供 text-shadow 工具类，需手动在 SCSS 中定义如 .text-shadow-sm 等类；兼容性好但需避免过度使用、透明度缺失、单位失真及图标阴影适配问题。
Bootstrap 5 里没有内置文字阴影类
bootstrap 默认不提供像 .text-shadow-sm 这样的原生工具类。它的 css 变量和实用工具集中，text-shadow 不在默认启用范围内——哪怕你启用了所有 utilities，它也不会自动生效。
如果你在文档里搜 text-shadow 却没找到对应类名，不是漏看了，是真没加。
手动添加 text-shadow 实用工具类（推荐）
最稳妥的做法是自己补上，且控制粒度：避免全局污染，只按需生成几个常用值。在你的自定义 SCSS 文件（比如 _custom.scss）里加：
@each $size, $value in (sm: 0.05rem 0.05rem 0.1rem rgba(0, 0, 0, 0.3),
md: 0.1rem 0.1rem 0.25rem rgba(0, 0, 0, 0.4),
lg: 0.15rem 0.15rem 0.5rem rgba(0, 0, 0, 0.5)) {
.text-shadow-#{$size} {
text-shadow: $value;
}
}
编译后就能用 class="text-shadow-md" 了。注意：text-shadow 的浏览器兼容性很好（IE10+），但别叠加太多层，否则在低分辨率屏上会糊。
直接用内联 style 或单独 class 也行，但有隐患
临时调试可以写 <p style="text-shadow: 1px 1px 2px #000">Hello</p>，但上线前建议收归 CSS 管理。容易踩的坑包括：
- 忘记写
rgba()透明度，导致深色背景上文字“消失”（阴影盖住文字） - 用
em或rem做偏移值，缩放时阴影比例失真 - 在
.btn上加阴影后，和:hover的背景色变化不协调，视觉跳变
如果用 Bootstrap Icons，图标文字阴影要单独处理
图标字体（如 <i class="bi bi-alarm"></i>）本质是文字，所以同样适用 text-shadow 类。但要注意：
— 图标本身已有 fill 颜色，加太重的阴影会让边缘发虚
— 若图标被包裹在 .btn 中，按钮的 line-height 和 padding 会影响阴影视觉位置
— SVG 图标（非字体版）不响应 text-shadow，得用 <filter></filter> 或 CSS filter: drop-shadow()
