Bootstrap 5 移除了 text-shadow 工具类，因其易损可访问性，官方建议手写 CSS 或通过 Sass utilities-api 扩展；推荐自定义 .text-shadow-sm/md/lg/none 类并注意层叠顺序、对比度与字体大小。
Bootstrap 5 本身不提供 text-shadow 工具类
Bootstrap 5 移除了所有与 text-shadow 相关的内置工具类（比如旧版的 text-shadow 或 text-shadow-sm），也不再通过 Sass 变量或 utilities 自动编译生成。这不是遗漏，而是设计取舍——文本阴影属于强视觉定制项，容易破坏可访问性（如对比度下降），官方建议按需手写 CSS。
如果你在文档里搜不到 text-shadow 类，不是你漏装了插件，是它真没了。
用自定义 CSS 实现可控的 text-shadow 工具类
最直接的办法是在项目 CSS 中补充几个常用值的 utility 类，保持与 Bootstrap 命名风格一致：
.text-shadow-sm { text-shadow: 0 1px 2px rgba(0,0,0,.2); }
.text-shadow-md { text-shadow: 0 2px 4px rgba(0,0,0,.25); }
.text-shadow-lg { text-shadow: 0 4px 8px rgba(0,0,0,.3); }
.text-shadow-none { text-shadow: none; }这样就能像其他 Bootstrap 类一样使用：<p class="text-shadow-md text-white">标题</p>。
- 注意顺序：把
text-shadow-*放在text-*类之后，避免被覆盖（CSS 层叠） - 颜色要配好：加阴影后文字色和背景色的对比度可能不达标，WCAG 要求至少 4.5:1，可用 WebAIM 对比度检查器 验证
- 别对小字号文本滥用：12px 以下文字加
text-shadow容易模糊，尤其在 Windows 渲染下
用 Sass 变量 + utilities-api 扩展（适合长期维护项目）
如果你已用 Sass 编译 Bootstrap，并希望未来统一管理，可以利用其 utilities-api 注入新工具类：
@import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/utilities"; @import "bootstrap/scss/utilities/api"; <p>$utilities: map-merge( $utilities, ( "text-shadow": ( property: text-shadow, class: text-shadow, values: ( sm: 0 1px 2px rgba(0,0,0,.2), md: 0 2px 4px rgba(0,0,0,.25), lg: 0 4px 8px rgba(0,0,0,.3), none: none ) ) ) );
这样生成的类名就是 text-shadow-sm、text-shadow-none 等，和原生 utilities 行为一致（支持响应式前缀如 sm:text-shadow-md，如果启用了响应式 utilities）。
- 必须确保在
@import "bootstrap/scss/utilities"之后、@import "bootstrap/scss/utilities/api"之前注入 - 值中不能含空格分隔的多个声明（如
0 1px 2px #000, 0 -1px 1px #fff）——utilities-api不支持逗号分隔的多值，会解析失败
为什么不用 filter: drop-shadow() 替代？
有人试过用 filter: drop-shadow(0 2px 4px rgba(0,0,0,.25))，但它作用于整个元素盒模型，不是纯文本；会导致内联元素（如 <span>）阴影溢出、圆角裁剪失效、甚至影响 transform 动画性能。
-
text-shadow只作用于文字轮廓，精准、轻量、可继承 -
filter是全元素渲染层操作，开销大，且无法单独控制 x/y 偏移与模糊半径的组合逻辑 - 某些旧版 Safari 对
filter渲染文本有锯齿，而text-shadow兼容性更好（IE10+ 支持）
真正需要阴影效果时，老老实实用 text-shadow，别绕路。
