深色模式下shadow-sm不可见需三步解决：①改rgba为浅色高透明度值；②用prefers-color-scheme媒体查询自动适配；③检查父容器overflow:hidden裁剪并调整z-index或留白。
深色模式下shadow-sm几乎不可见，得换颜色值
Bootstrap 的 shadow-sm 默认用的是 rgba(0,0,0,.075)，在深色背景上几乎等于没影。这不是 bug，是 rgba 黑色在暗底上透不出层次。直接改值最有效：box-shadow: 0 .125rem .25rem rgba(255,255,255,.1) —— 换成浅色偏移，alpha 值略提至 .1，既不刺眼又保立体感。
别硬写死 rgba，用媒体查询适配 prefers-color-scheme
用户系统开了深色模式时，CSS 应自动响应。靠 @media (prefers-color-scheme: dark) 切换阴影色比 JS 判断更轻量、更可靠：
.card-shadow {
box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}
@media (prefers-color-scheme: dark) {
.card-shadow {
box-shadow: 0 .5rem 1rem rgba(255,255,255,.12);
}
}
注意：别用 !important 强盖，优先级靠选择器精度（比如 .card.card-shadow）更稳妥。
父容器 overflow: hidden 会连带裁掉深色阴影
深色背景下阴影本就弱，再被裁一半，基本就消失了。常见于 .card-group、.row 或自定义 wrapper 上写了 overflow: hidden —— 它不区分“内容”和“阴影”，一并切掉。
立即学习“前端免费学习笔记（深入）”；
- 临时验证：浏览器里删掉父容器的
overflow，看阴影是否回来 - 长期解法：把
overflow: hidden换成overflow: visible，或改用padding留白替代裁剪 - 若必须保留裁剪（如图片卡片），给卡片加
position: relative和z-index: 1，确保阴影层不被兄弟元素压住
移动端点按无:hover，阴影反馈得 fallback 到 :focus 或 :active
iOS Safari 和多数安卓浏览器不维持 :hover 状态，点一下就闪退。深色模式下这点更明显——你刚看到一点浅色阴影，手一抬就没了。
- 给卡片加
tabindex="0"，让它可聚焦 - 补
.card-shadow:focus { box-shadow: 0 .5rem 1rem rgba(255,255,255,.15); } - 再加
.card-shadow:active { transform: translateY(0); }，模拟按下回弹
真正麻烦的不是调不出阴影，而是阴影在深色+触屏+裁剪三重条件下同时失效，而你只盯着 color 值调——先查 overflow、再查 prefers-color-scheme、最后动 rgba，顺序错了，调三天也没用。
