bootstrap轮播图标题“阴影”实为.carousel-caption的半透明背景（如rgba(0,0,0,.6)），非text-shadow；需覆盖background-color、加position-relative定位上下文、用媒体查询控制小屏显示，并配合padding、object-fit及暗色模式适配确保响应式可读性。
Bootstrap 本身不提供“带阴影背景文字标题”的现成类，所谓“阴影”实际是 .carousel-caption 的半透明背景层，不是 text-shadow；真要响应式落地，必须手动接管定位上下文、断点行为和可读性逻辑。
为什么直接加 text-shadow 没用还糊成一团
很多人调 text-shadow 发现标题在浅色图上发灰、深色图上消失——因为 Bootstrap 的轮播/卡片标题默认靠 .carousel-caption 或 .card-img-overlay 提供的是背景遮罩（background-color: rgba(0,0,0,.6)），不是文字投影。你改 text-shadow，它根本没参与渲染流程。
- 真正生效的是覆盖
.carousel-caption的background-color，比如改成rgba(0,0,0,.4)或transparent - 如果去掉背景后文字不可读，再补一层轻量
text-shadow: 0 1px 2px rgba(0,0,0,.3)，别用双层或大模糊值 - 千万别在
.text-white上硬套text-shadow：WCAG 对比度检测只认 RGB 差值，阴影不计入可访问性达标
小屏标题错位、消失、贴边的根本原因
文字飘到左上角、移动端完全不显示，90% 是没给图片容器加 position: relative。Bootstrap 的 .carousel-item 或 .card 默认是 position: static，position: absolute 的文字会往上找最近的定位祖先，经常落到 里。
- 必须显式加
class="position-relative"到图片的直接父容器（如<div class="carousel-item position-relative">） <li>小屏下 Bootstrap 默认设 <code>.carousel-caption { display: none }，要显示就得加媒体查询：@media (max-width: 576px) { .carousel-caption { display: block !important; } } - 小屏建议用
bottom-0 start-0 end-0 translate-middle-x，大屏用top-50 start-50 translate-middle，别混用像素值 - 小屏降低背景透明度（如
rgba(0,0,0,.3)），避免遮挡图片细节 - 搭配
@media (prefers-color-scheme: dark)改阴影色为rgba(255,255,255,.1)，而不是沿用黑底 - 如果项目用 Sass 编译，直接改变量
$carousel-caption-bg: rgba(0, 0, 0, .4)和$carousel-caption-color: #fff，比覆盖 CSS 更干净 - 别漏掉
padding：Bootstrap 5 移除了默认内边距，必须手动加padding: 1.5rem保证呼吸感 -
.card-img-top必须配object-fit: cover，否则拉伸后文字锚点偏移 - 如果文字两行，
bottom-0不等于“贴底”，真实底边是第二行文字基线，稳的做法是加min-height+display: -webkit-box截断 - 滚动容器（如
.card-body套了overflow-y: auto）里放标题，外层必须加position: relative和z-index，否则阴影被裁掉 - 文字含链接时检查
pointer-events：父层z-index过低或overflow: hidden会导致点击失效
响应式阴影背景怎么随屏幕缩放不翻车
固定写死 rgba(0,0,0,.6) 在手机上太重、桌面又太淡，且暗色模式下几乎隐形。得拆开控制：背景透明度、颜色、文字色三者联动。
卡片/网格里叠加标题时最容易被忽略的坑
在 .card 或响应式网格里放文字标题，不是套个 .card-img-overlay 就完事——它只适用于标准卡片结构，且对图片尺寸、容器高度极其敏感。
真正难的不是写几行 CSS，而是测试真机下 vh 行为、图片加载延迟导致的布局抖动、以及暗色模式切换瞬间的闪烁。这些没法靠工具类绕过，只能实机跑一遍。
