直接修改.card的box-shadow无效，因Bootstrap 5+默认使用!important或被工具类覆盖；应通过自定义class（如card-custom-shadow）覆盖，并显式声明transition实现平滑变化。
直接改 .card 的 box-shadow 值基本无效，因为 Bootstrap 5+ 默认用了 !important 或被 shadow-sm 等工具类覆盖；真正可控的方式是用自定义 class 覆盖，且必须显式声明 transition 才能实现平滑变化。
为什么直接写 box-shadow 在 .card 上没反应
不是语法错，而是样式被压制或渲染条件不满足：
-
.card默认带box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important（尤其在某些定制版或主题中） - 你加的 CSS 文件加载顺序靠前，被 Bootstrap 后续样式覆盖
- 父容器设了
overflow: hidden（比如.card-group、.container-fluid），阴影直接被裁掉 - 卡片本身无内容、无内边距、
display是inline，导致盒模型没尺寸，box-shadow不渲染
用自定义 class 覆盖默认阴影（推荐）
避免动源码或滥用 !important，优先加新 class：
- 给卡片加语义化类，如
class="card card-custom-shadow" - 在自定义 CSS 中写：
.card-custom-shadow {<br> box-shadow: 0 4px 12px rgba(0,0,0,.12) !important;<br>} - 若不想用
!important，提高选择器权重：.card.card-custom-shadow或body .card-custom-shadow - 确保该 CSS 在 Bootstrap CSS 之后加载（检查
<link>顺序或@import位置）
悬停时加深阴影必须配 transition
只写 :hover 不会动画，浏览器默认“跳变”：
- 常态规则里必须声明：
.card-custom-shadow { transition: box-shadow .2s ease; } - 悬停值不能是
none，否则过渡中断；保持两个合法值：.card-custom-shadow:hover {<br> box-shadow: 0 12px 24px rgba(0,0,0,.22) !important;<br>} - 别写
transition: all，否则边框、背景色也会动，干扰焦点 - 移动端真机点按不触发
:hover，如需反馈，加tabindex="0"并补:focus规则
暗色模式和可访问性适配不能漏
硬编码的 rgba(0,0,0,.15) 在深色背景上会糊成灰块，且开了系统“减少动画”时仍强行过渡：
- 用媒体查询适配暗色：
@media (prefers-color-scheme: dark) {<br> .card-custom-shadow {<br> box-shadow: 0 4px 12px rgba(255,255,255,.08);<br> }<br>} - 尊重用户偏好：
@media (prefers-reduced-motion: reduce) {<br> .card-custom-shadow {<br> transition: none;<br> box-shadow: 0 2px 6px rgba(0,0,0,.08);<br> }<br>} - 别依赖
data-bs-theme="dark"自动切换——它不控制box-shadow，得手动管
真正难的不是调出阴影，而是排查它为什么“本该出现却没出现”：先看开发者工具里哪条 box-shadow 生效、再查祖先元素是否 overflow: hidden、最后确认卡片有没有实际尺寸。参数调得再准，渲染链断了也没用。
