Bootstrap 不提供响应式 text-shadow 工具类，需通过媒体查询或 Sass 变量手动实现；推荐按断点逐级增强阴影，并注意可访问性、性能及深色模式适配。
text-shadow 在 Bootstrap 中不自动响应式，必须手动控制
bootstrap 本身不提供响应式 text-shadow 的内置类或工具类。它的排版工具（如 fs-1 到 fs-6、fw-bold）只影响字体大小、粗细、颜色等，对阴影无任何干预。想让文字阴影随屏幕尺寸变化（比如小屏去掉阴影、大屏加多层阴影），只能靠自定义 css 媒体查询或 sass 变量控制。
用媒体查询实现不同断点下的 text-shadow 差异
直接在 CSS 中覆盖 Bootstrap 的标题类（如 .display-4 或 h1），按 sm、md、lg 断点调整 text-shadow 值是最稳妥的做法。注意：Bootstrap 5 的断点是 min-width 触发，所以小屏默认应设为 none，再逐级增强。
示例：
@media (min-width: 576px) {
h1 { text-shadow: 1px 1px 2px rgba(0,0,0,0.2); }
}
@media (min-width: 992px) {
h1 { text-shadow: 2px 2px 4px rgba(0,0,0,0.3), 0 0 8px rgba(0,100,200,0.1); }
}
@media (min-width: 1200px) {
h1 { text-shadow: 3px 3px 6px rgba(0,0,0,0.4), 0 0 12px rgba(0,80,180,0.2); }
}
- 不要把所有阴影写在基础
h1上，否则小屏也会渲染，影响性能且可能糊字 - 避免使用过大的模糊值（如
20px）在移动端，会严重拖慢渲染帧率 - RGBA 颜色比 HEX 更安全，透明度可控，适配深色模式时也更容易调整
用 Sass 变量 + @each 生成响应式 text-shadow 工具类（适合项目长期维护）
如果你用 Bootstrap 源码（Sass 版），可以扩展其工具类体系。Bootstrap 本身没提供 text-shadow 工具类，但你可以仿照 font-size 工具类逻辑，在自定义 Sass 文件中定义：
$text-shadow-breakpoints: (
xs: none,
sm: 1px 1px 2px rgba(0,0,0,0.2),
md: 2px 2px 4px rgba(0,0,0,0.3),
lg: 3px 3px 6px rgba(0,0,0,0.4)
);
@each $breakpoint, $value in $text-shadow-breakpoints {
@include media-breakpoint-up($breakpoint) {
.text-shadow-#{$breakpoint} {
text-shadow: $value;
}
}
}
这样就能在 HTML 中按需使用：<h1 class="text-shadow-sm text-shadow-md">标题</h1>。注意：xs 设为 none 是为了显式关闭超小屏阴影，不是省略——省略会导致继承父级或浏览器默认值。
常见踩坑：text-shadow 和 color contrast、可访问性冲突
加了阴影不等于提升可读性。尤其在浅色背景上叠加浅色阴影（如 rgba(255,255,255,0.3)），反而降低对比度，触发 WCAG AA/AAA 失败。Chrome DevTools 的「Accessibility」面板会直接标红。
- 始终用
color+background-color+text-shadow三者一起测试对比度，别只看视觉效果 - 避免对
small或caption类文本加阴影——字体小 + 模糊值稍大 = 完全不可读 - 深色模式下，如果用了
prefers-color-scheme切换主题，记得同步重置text-shadow的颜色通道，否则白字黑影在暗背景下会“消失”
真正难的不是加阴影，而是让阴影在各种设备、主题、缩放比例下都不破坏文字可识别性。动手前先打开几个真机预览，比写十行 CSS 都管用。
