应使用 box-shadow 自定义卡片阴影而非 bootstrap 的 shadow- 工具类，因后者固定值、不响应缩放、难控方向与模糊度；网格布局须用 row+col- 替代已移除的 card-columns；需适配暗色模式与减少动画，并约束 card-img-top 尺寸防溢出。
卡片阴影用 box-shadow 而不是 shadow-* 工具类
Bootstrap 5 的 shadow-sm/shadow/shadow-lg 确实能快速加阴影，但它们是固定值、响应式下不随屏幕缩放调整，且无法控制方向或模糊度。真要「带阴影的卡片」，得自己写 box-shadow —— 尤其当需要深浅渐变、悬停增强、或适配暗色模式时。
常见错误是直接套用 shadow-lg 后发现移动端阴影太重、PC端又不够立体。实际做法是：
- 用自定义 CSS 类（比如
.card-shadow）覆盖默认工具类 - 在
@media (min-width: 768px)下加大blur和offset值 - 搭配
transition: box-shadow 0.2s实现悬停平滑变化 - 避免对
.card直接设overflow: hidden，否则阴影会被裁掉 —— 改用padding留白
网格布局用 row + col-* 而非 card-columns
card-columns 是 Bootstrap 4 的遗留功能，Bootstrap 5 已移除，且它依赖 CSS columns，会导致卡片高度不一致时出现空白断层、响应式错位，根本没法可靠控制每行数量。
正确方式是老老实实用 row 包裹，靠 col-md-4、col-lg-3 这类栅格类控制列数：
-
col-12：所有屏幕单列 -
col-sm-6 col-md-4 col-lg-3：小屏 2 列 → 中屏 3 列 → 大屏 4 列 - 别漏掉
g-3（即gap: 1rem），它比mb-3更可靠地控制卡片间距 - 如果卡片内容高度差异大，加
d-flex flex-column到.card内部容器，让按钮始终贴底
响应式阴影需配合 prefers-reduced-motion 和暗色模式
用户开了系统「减少动画」或深色模式时，硬编码的 box-shadow 可能刺眼或与背景融合失效。这不是锦上添花，而是可访问性刚需。
实际处理逻辑很直接：
- 用
@media (prefers-reduced-motion: reduce)把transition设为none，并降低默认阴影强度 - 用
@media (prefers-color-scheme: dark)替换阴影颜色为rgba(255,255,255,0.1)而非rgba(0,0,0,0.2) - 别用
!important强行覆盖，Bootstrap 的data-bs-theme="dark"会干扰你的自定义样式 - 测试时打开浏览器开发者工具的「Rendering」面板，勾选「Emulate prefers-reduced-motion」和「Emulate prefers-color-scheme」
card-img-top 在响应式下容易撑破容器
图片没设 max-width: 100% 或没配 height 时，card-img-top 会突破卡片宽度，尤其在竖屏手机上把阴影拉歪、甚至触发横向滚动条。
必须加的约束只有两条：
- 给
.card-img-top显式设height: auto（防止被父级flex压缩变形） - 加
object-fit: cover并配aspect-ratio: 16/9（现代写法）或固定height（兼容旧版） - 如果图片来自 CMS 或用户上传，务必在后端压缩尺寸 —— 前端
max-width挡不住大图内存暴涨 - 阴影层级要高于图片：检查
z-index是否被position: relative卡住，card-img-top默认无定位，别漏设
细节都在像素级留白、媒体查询断点选择、以及阴影是否被父容器裁切里。改一个 g-3 到 g-4，可能就让阴影在 iPad 上刚好露出半像素。
