bootstrap 5 不提供文字阴影工具类，需手动为 .carousel-caption h3 和 p 添加 text-shadow；shadow-sm 作用于容器盒模型，无法改善文字发虚，且默认小屏隐藏字幕，须用媒体查询或 display: block !important 激活。
为什么轮播图文字没阴影，加了shadow-sm也没用
因为shadow-sm作用于整个.carousel-caption容器的盒模型，不是文字本身；它会在文字块外围画一圈投影，文字边缘依然发虚。真正控制文字清晰度的是text-shadow，但Bootstrap 5默认不提供任何text-shadow工具类——搜文档找不到，不是你漏看了，是真没加。
怎样给.carousel-caption里的文字加可读阴影
直接在自定义CSS中为文字标签写text-shadow，别依赖组合类或内联样式。重点在于适配背景动态性：
-
text-shadow必须带透明度，推荐rgba(0,0,0,0.3)起手，深色图上可用rgba(255,255,255,0.15)补第二层 - 单位统一用
rem，例如text-shadow: 0 0.1rem 0.2rem rgba(0,0,0,0.3)，避免缩放失真 - 别对
.carousel-caption整体加阴影，而是精确到.carousel-caption h3和.carousel-caption p - 如果用了
text-white，务必同步加阴影——纯白字盖在浅图或渐变上会直接“消失”
移动端文字居中错位、显示不全怎么修
Bootstrap 5的.carousel-caption默认只在min-width: 768px（md断点）以上显示，小屏下display: none。这不是bug，是设计行为，但常被忽略：
- 加覆盖规则：
.carousel-caption { display: block !important; }最简单，但不够精细 - 更稳妥的是响应式控制：
@media (min-width: 576px) { .carousel-caption { display: block; } } - 垂直居中别靠
top: 50%; transform: translateY(-50%)——图片高度不固定时失效；改用position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; -
.carousel-item已设position: relative，无需额外加
和Bootstrap类共存时最容易被覆盖的三个地方
不是你的text-shadow写错了，很可能是加载顺序或权重被压过：
-
.text-white带!important，如果你的text-shadow类定义在Bootstrap CSS之前，会被直接干掉 - 避免写
.carousel-caption.text-white.text-shadow-md这种链式类，改用独立命名如.caption-title-shadow并确保CSS后置加载 - 别在HTML里写
style="text-shadow: ..."——无法响应式、无法复用、一换主题就得全搜替换
真正难的不是写几行CSS，而是让阴影在iOS Safari小字号下不毛刺、在Windows高对比度模式下不突然消失、在轮播自动切换时不会因opacity过渡导致文字闪动——这些细节得真机测，不能只看Chrome模拟器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
