bootstrap 默认不提供 text-shadow 工具类，需自定义 class（如 .shadow-title）并确保其声明顺序在 bootstrap css 之后，配合 clamp()、css 变量及深色模式媒体查询实现响应式阴影，避免被 .text-white 等类覆盖。
text-shadow 在 Bootstrap 里怎么用才不被覆盖
Bootstrap 默认不会重置 text-shadow，但它的组件（比如 h1～h6、.display-*）常带 font-weight 和 line-height 调整，容易让阴影看起来发虚或偏移。关键不是“加不加”，而是“加在哪一层”。
- 别直接写在
h1标签上——Bootstrap 的h1类可能有margin或font-size响应式规则，导致阴影位置不稳定 - 推荐用自定义 class 包裹文字，例如
<span class="shadow-title">标题</span>，再单独设text-shadow - 移动端小字号下阴影容易糊成一团，建议配合
font-size: clamp(1.5rem, 4vw, 2.5rem)动态缩放，再调text-shadow: 0.1rem 0.1rem 0.2rem rgba(0,0,0,0.2)
响应式阴影参数怎么随屏幕变化
纯 CSS 媒体查询写法太啰嗦，Bootstrap 5+ 的 clamp() + 自定义属性更可控。阴影本身不能响应式，但你可以让它“看起来响应”。
- 定义 CSS 变量：
:root { --shadow-blur: 0.2rem; --shadow-offset: 0.1rem; } - 在
@media (max-width: 768px)里改变量值，比如把--shadow-blur降到0.1rem，避免小屏模糊 - 注意：不要用
rem以外的单位（如px）设阴影偏移，否则在缩放页面时会失真
和 Bootstrap 深色模式冲突怎么办
如果你启用了 Bootstrap 5.3+ 的深色模式（data-bs-theme="dark"），默认 text-shadow 用 rgba(0,0,0,0.2) 在深背景上几乎看不见。
- 必须配合
color-scheme或媒体查询判断主题：@media (prefers-color-scheme: dark) { .shadow-title { text-shadow: 0 0 0.2rem rgba(255,255,255,0.3); } } - 更稳妥的做法是用
color-mix()（Chrome 115+ 支持）动态混合文字色与背景色生成阴影色，但兼容性差，生产环境慎用 - 别依赖
!important强行覆盖 —— Bootstrap 的.text-white等工具类会干扰层级，优先用嵌套结构控制 specificity
性能和可访问性容易被忽略的点
text-shadow 本身开销极小，但叠加多层（比如 text-shadow: 0 0 2px #000, 0 0 4px #000）在低端安卓机上可能引发渲染卡顿；更重要的是，它会让部分屏幕阅读器跳过文字轮廓识别。
- 永远保留足够对比度：用 WCAG 工具测
text-shadow后的实际文字与背景比，尤其当阴影色和文字色接近时 - 避免用阴影模拟描边效果（比如想做出“白字黑边”），应该用
-webkit-text-stroke替代，它对可访问性更友好 - 如果标题含图标（如
<i class="bi bi-star"></i> 标题），确保图标和文字阴影节奏一致，否则视觉割裂
text-shadow 的抗锯齿处理和其他浏览器不同，上线前至少在 iPhone 实机预览一次。
