Bootstrap 中 text-shadow 不直接生效，因默认不提供相关工具类，需手动添加 CSS；shadow 类仅作用于盒模型，对文字无效，text-shadow 是原生属性，须自定义实现并注意兼容性与可访问性。
text-shadow 在 Bootstrap 中直接生效吗
能，但 Bootstrap 默认不提供 text-shadow 工具类，也不在 .display-* 或 .h1 等标题类中内置阴影效果。你得自己加 CSS，或者用 Bootstrap 的自定义 CSS 变量 + 工具类组合实现。
常见误区是以为 shadow 类（如 .shadow-sm）能作用于文字——它只对元素盒子生效，对文字无效。
-
text-shadow是原生 CSS 属性，和 Bootstrap 版本无关，所有现代浏览器都支持 - Bootstrap 5+ 的
text-*color类（如text-white）可与text-shadow共存，但需注意颜色对比度是否足够 - 若用 Sass 编译 Bootstrap，可借助
$theme-colors和map-get()动态生成带阴影的文本类
如何给 Hero 标题加多层 text-shadow 实现立体感
单层 text-shadow: 2px 2px 4px rgba(0,0,0,0.3) 只能出基础投影；要模拟「立体浮雕」或「霓虹发光」效果，得叠加多个偏移+模糊值。
例如下面这段样式能让白色标题在深色背景上“弹出来”：
.hero-title {
color: #fff;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000,
0 0 8px rgba(255,255,255,0.5);
}
- 前四行用
0模糊半径实现硬边描边，增强可读性（尤其小字号或低分辨率屏） - 最后一行用正向模糊模拟发光，
rgba()的 alpha 值控制光晕强度 - 避免在浅色背景上用纯白+白光阴影，会导致文字“消失”——此时应改用深色文字+黑/灰阴影
响应式下 text-shadow 怎么适配不同屏幕
移动端字体变小后，固定像素的 text-shadow 容易显得过重或糊成一团。不能只靠媒体查询逐个写断点，更稳妥的是用相对单位或 CSS 自定义属性动态缩放。
- 优先用
em或rem替代px：例如text-shadow: 0.1em 0.1em 0.2em rgba(0,0,0,0.4) - 配合 Bootstrap 的断点变量，在 Sass 中写：
@include media-breakpoint-down(md) { .hero-title { text-shadow: 0.05em 0.05em 0.1em rgba(0,0,0,0.3); } } - 纯 CSS 方案可用
clamp()控制阴影模糊半径：text-shadow: 0 0 clamp(2px, 0.1vw, 6px) currentColor
为什么加了 text-shadow 还看不见效果
最常被忽略的是层级和背景干扰：文字阴影本质是“绘制在文字下方”的图层，一旦父容器有 overflow: hidden、clip-path 或背景渐变裁切，阴影就会被截掉。
- 检查 Banner 容器是否设置了
overflow: hidden（尤其是轮播图或全屏高度限制场景） - 确认标题元素没有
transform: translateZ(0)或will-change: transform，这些可能触发独立渲染层，导致阴影被裁剪 - 如果用了
background-clip: text+-webkit-text-fill-color: transparent实现渐变文字，text-shadow会失效——此时需用filter: drop-shadow()替代
真正麻烦的不是怎么加阴影，而是加完之后在 Safari 移动端、旧版 Edge 或某些安卓 WebView 里突然不显示——建议始终保留一层 fallback 文字颜色，别依赖阴影当唯一视觉信息。
