text-shadow 必须手写，因 bootstrap 无 text-shadow 工具类；需配合可控背景层与响应式定位，三者缺一不可，且须适配暗色模式、减少动画及 wcag 对比度要求。
直接给文字加 shadow-sm 没用——它作用在盒子外围，不是文字本身；真正让标题在图片/渐变背景上“立得住”的，是 text-shadow + 可控背景层 + 响应式定位三者配合，缺一不可。
为什么 text-shadow 必须手写，不能靠 Bootstrap 工具类
Bootstrap 的 shadow-sm、shadow 等类只影响元素的盒阴影（box-shadow），对文字渲染层完全无感。你在 <h1 class="shadow-sm"></h1> 上看到的“阴影”，其实是整个标题块外围一圈灰边，文字边缘依然发虚，尤其压在浅色图或渐变上时几乎不可读。
真正生效的是 text-shadow，它直接参与字体光栅化过程。但 Bootstrap 5 不提供任何 text-shadow 工具类，必须自定义 CSS：
- 单层写法：
text-shadow: 0 1px 2px rgba(0,0,0,0.3);—— 适合深色背景+浅色文字 - 双层增强（推荐）：
text-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 -1px 1px rgba(255,255,255,0.1);—— 兼顾轮廓清晰与柔和过渡 - 单位别用 px：改用
rem或vw，否则小屏下模糊半径过大，字迹糊成一团
如何让阴影文字在图片背景上始终可读
纯 text-shadow 在复杂背景（如高光人像、渐变天空）上依然容易被吞掉。必须叠加一层可控背景层，而不是依赖默认的 .carousel-caption 黑底。
- 不要直接改
.carousel-caption的background-color—— 它在小屏下默认display: none，你调了也白调 - 自己建容器：
<div class="title-overlay"><h1>标题</h1></div>，再配 CSS：.title-overlay { background: rgba(0,0,0,0.45); padding: 1.5rem; } - 若背景是 SVG 或纯色，可省略背景层，但
text-shadow透明度必须提高到rgba(0,0,0,0.5)以上 - 切忌用
filter: drop-shadow()替代 —— Chrome 下小字号会毛边，抗锯齿失效
响应式定位：小屏贴底、大屏居中怎么稳住不飘
文字飘走或裁切，90% 是因为没设定位上下文。Bootstrap 的 .col、.card 默认 position: static，position: absolute 的文字会往上找 ，结果就是左上角消失。
- 图片父容器必须加
position-relative：<div class="position-relative"><img class="w-100"></div> - 小屏底部居中：
class="position-absolute bottom-0 start-0 end-0 translate-middle-x"（注意：d-md-none要配好断点） - 大屏垂直居中：
class="position-absolute top-50 start-50 translate-middle"，但需配合@media (min-width: 992px)微调top值，避免 iOS Safari 地址栏干扰 - 文字行数不确定时，
bottom-0不等于“贴底”——两行文字会从第二行底边起算，更稳的做法是固定height+display: -webkit-box截断
暗色模式和减少动画下的阴影适配要点
用户开了系统深色模式或“减少动画”，硬编码的 text-shadow 和 box-shadow 会立刻翻车：深色背景上阴影太淡看不见，动画关闭时悬停突变刺眼。
- 用原生媒体查询适配：
@media (prefers-color-scheme: dark) { .title-overlay { background: rgba(255,255,255,0.15); } } - 减少动画场景下：
@media (prefers-reduced-motion: reduce) { * { transition-duration: 0.01ms !important; } }，同时把阴影强度降一级 - 别依赖
!important强盖 —— Bootstrap 的data-bs-theme="dark"会干扰你的样式优先级，改用更具体的选择器，比如.hero-section .title-overlay - WCAG 对比度检测不认
text-shadow，最终仍要确保文字色与背景色的 RGB 差值达标，阴影只是辅助
真正在意效果的人，最后都会卡在 iOS Safari 的 vh 行为、图片加载延迟导致的布局抖动、以及暗色模式下 rgba() 颜色在不同设备上的渲染偏差上——这些没法靠一个 class 解决，得真机测。
