用 text-shadow 搭配 bg-dark 类可实现基础阴影文字效果，需手动添加 style="text-shadow: 0 2px 4px rgba(0,0,0,.5);"，避免依赖无效类或 box-shadow 替代。
用 text-shadow 搭配 bg-dark 类实现基础阴影文字效果
Bootstrap 本身不提供“带阴影背景的文字标题”这种复合样式，text-shadow 是纯 CSS 属性，必须手动写。但你可以借助 Bootstrap 的背景色类（比如 bg-dark、bg-light）快速铺底，再叠加文字阴影增强可读性。注意：别指望 text-bg-primary 这类类能给文字加背景——它只作用于内联元素（如 <span></span>），对 <h1></h1> 这类块级标题无效，强行加会破坏行高和 padding。
常见错误是直接套用 text-white bg-dark 就以为完事了，结果在暗色背景上文字发虚、边缘模糊。这时候必须补 text-shadow 来压住边缘：
<h2 class="text-white bg-dark p-4" style="text-shadow: 0 2px 4px rgba(0,0,0,.5);">响应式标题</h2>
-
text-shadow的第三参数（模糊半径）建议控制在2px–6px，太大在小屏上会糊成一片 - 暗色背景配白字时，阴影用
rgba(0,0,0,.5)；亮色背景配黑字则换rgba(255,255,255,.7) - 别用
box-shadow替代text-shadow——它会给整个标题块加阴影，不是“文字自带阴影”
响应式断点下动态调整 text-shadow 和字体大小
Bootstrap 的 h1–h6 响应式字号（如 h2 在 sm 下是 1.5rem，lg 下是 2rem）不会自动缩放 text-shadow 的偏移和模糊值，导致小屏阴影太重、大屏又太淡。必须用媒体查询或 Bootstrap 的响应式工具类配合自定义 CSS。
推荐做法：用 @media 覆盖不同断点的 text-shadow，并确保和 font-size 协调：
@media (max-width: 576px) {
.shadow-title {
font-size: 1.25rem;
text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
}
@media (min-width: 992px) {
.shadow-title {
font-size: 2.5rem;
text-shadow: 0 3px 8px rgba(0,0,0,.4);
}
}
- 移动端优先：小字号配更小的
text-shadow偏移（1px）和更高透明度（.6），避免遮挡 - 桌面端可加大模糊值（
8px），但别超12px，否则 Safari 渲染会变慢 - 不要依赖
text-shadow: 0 0 10px #000这种单值写法——它没有方向性，在斜体或某些字体下容易歪
避免 background-image 覆盖文字阴影的陷阱
有人想用渐变背景 + 文字阴影，结果加了 bg-gradient 或自定义 background-image 后，阴影消失。这不是 Bug，而是层叠顺序问题：background-image 默认绘制在文字下方，但若用了 background-clip: text 或 -webkit-text-fill-color: transparent，就会把文字“挖空”，让阴影也跟着失效。
安全方案是保持文字为不透明实体，背景用纯色或渐变，阴影走标准路径：
<h3 class="text-white bg-gradient-to-r from-primary to-dark p-3" style="text-shadow: 0 2px 6px rgba(0,0,0,.5);"> 标题文字 </h3>
-
bg-gradient类本身不影响text-shadow，前提是没动color或background-clip - 如果非要文字渐变色，改用
background-clip: text时，必须额外加一层伪元素或span承载阴影，原文字设为透明 - 所有带
text-shadow的标题，务必检查 DevTools 的 “Computed” 面板里text-shadow是否被其他规则覆盖（比如第三方 UI 库重置了）
移动端 Safari 下 text-shadow 渲染异常的临时修复
iOS 15+ 的 Safari 对小字号 + 大模糊值的 text-shadow 有渲染抖动，尤其配合 transform: scale() 或 viewport 缩放时。不是 Bootstrap 的锅，但会影响你调试。
绕过方式很务实：降模糊值 + 加描边替代：
.shadow-title {
text-shadow: 0 1px 1px rgba(0,0,0,.3),
0 0 1px rgba(0,0,0,.2);
}
- 拆成两层
text-shadow：第一层给方向性（1px偏移），第二层给柔和感（无偏移 + 极细模糊） - 避免在
font-weight: 300或font-family: system-ui下用 >4px 模糊值 - 真遇到卡顿，宁可去掉阴影，用
border-bottom: 2px solid rgba(0,0,0,.2)模拟底部强调线，比硬扛渲染更稳
text-shadow: 0 2px 4px #000。
