Bootstrap 5.3+ 可用 shadow-sm、shadow-md-md、shadow-lg-xl 实现响应式阴影，小屏轻、大屏重；需避免:hover在触屏失效，改用:active或媒体查询；自定义阴影应避开!important冲突，图片需设object-fit和固定尺寸防错位。
用 shadow- 工具类配合断点前缀控制不同设备的投影强度
Bootstrap 5+ 的阴影工具类（如 shadow-sm、shadow-md、shadow-lg）本身不带响应式断点，但你可以用带断点前缀的版本（如 shadow-sm + shadow-md-md + shadow-lg-xl）实现「小屏轻阴影、大屏重阴影」的效果。关键不是写多个类互斥，而是按移动优先叠加：先设基础阴影，再在更大断点上覆盖增强。
常见错误现象：shadow-lg 在手机上显得突兀、挤压内容边距；或只写 shadow-lg 导致小屏也套用大屏样式，文字被阴影“吃掉”。
- 正确写法示例：
class="card shadow-sm shadow-md-md shadow-lg-xl"→ 小屏用shadow-sm，中屏（≥768px）升级为shadow-md，超大屏（≥1200px）再升为shadow-lg - 必须确保 Bootstrap 版本 ≥5.3，否则
shadow-*-md类不存在（旧版需手动写媒体查询） - 避免混用
!important覆盖：这些类内部已用!important保证层叠优先级，额外加反而可能破坏断点切换逻辑
为什么纯 :hover 阴影在移动端不可靠
卡片悬停阴影（如 .card:hover { box-shadow: ... }）在触屏设备上基本失效——手指点击不会触发 :hover，部分 iOS Safari 或 Android WebView 会短暂模拟后立刻清除，造成闪烁或无反馈。
真正可行的方案是分设备声明交互逻辑：
- 对鼠标设备（精细指针 + 支持 hover）：用
@media (hover: hover) and (pointer: fine)包裹:hover规则 - 对触屏设备：改用
:active模拟按下反馈，例如.card:active { transform: translateY(-1px); }，并搭配轻微阴影变化 - 别忘了给
box-shadow加transition: box-shadow 0.2s ease，否则切换生硬
自定义阴影时如何避免覆盖 Bootstrap 原有声明
如果你写 CSS 覆盖默认阴影（比如想让 .card 在 iPad 上用 0 4px 12px rgba(0,0,0,0.1)），直接写 .card { box-shadow: ... } 很可能被 Bootstrap 的 .shadow-* 工具类覆盖——因为后者用了 !important。
解决办法只有两个：
- 用更高权重的选择器，例如
.card.shadow-custom { box-shadow: ... !important; }，再在 HTML 中同时加shadow-custom和去掉原shadow-类 - 或者干脆放弃工具类，全程手写响应式规则：
@media (max-width: 575.98px) { .card { box-shadow: 0 2px 4px rgba(0,0,0,0.08); } } @media (min-width: 576px) and (max-width: 991.98px) { .card { box-shadow: 0 4px 8px rgba(0,0,0,0.1); } } @media (min-width: 992px) { .card { box-shadow: 0 6px 16px rgba(0,0,0,0.15); } }
卡片内图片拉伸导致阴影区域与视觉主体错位
如果 <img> 没设 object-fit: cover 或高度约束，它可能塌陷、拉伸、或留白，结果阴影框包裹的是整个 .card 容器（含空白），而用户看到的重点内容（比如人像脸部）却偏上/偏下，造成“阴影没罩住主体”的错觉。
这不是阴影本身的问题，而是容器尺寸失控：
- 给
.card-img-top显式设height: 200px（或aspect-ratio: 4/3）+object-fit: cover+object-position: center - 若要适配顶部重点（如人像），小屏单独加
@media (max-width: 576px) { .card-img-top { object-position: top; } } - 禁用
img { width: 100%; height: auto; }这类老式写法——它会让高度浮动，破坏阴影区域稳定性
box-shadow 第三个值（模糊半径）在高 DPI 屏幕（如 MacBook Retina、iPhone）下会自动放大，导致同一数值在不同设备上视觉重量差异明显。测试时务必真机连 Chrome DevTools 的 Device Mode，不能只靠模拟器。 
