<p>应直接使用 box-shadow 而非 shadow- 工具类，因其可微调且配合 transition 实现平滑悬停动画；需在常态卡片上声明 transition: box-shadow 0.3s ease，hover 时增大阴影值，并用 @media (hover: hover) 隔离桌面逻辑。</p>
卡片阴影用 box-shadow 而不是 shadow- 工具类
Bootstrap 5 的 shadow- 工具类（如 shadow-sm、shadow、shadow-lg）本质就是预设的 box-shadow 值，但它们固定、不可微调，且在悬停动画中无法平滑过渡。真正可控的做法是直接写 CSS：用 box-shadow 定义基础阴影，再配合 transition 实现悬停渐变。
常见错误是只加 shadow-lg 就以为能动起来——它没声明 transition，悬停时阴影会突变，不发光也不柔和。
- 基础卡片必须显式设置
transition: box-shadow 0.3s ease; - 悬停状态用
:hover放大阴影值，例如从0 2px 8px rgba(0,0,0,0.1)到0 8px 24px rgba(0,0,0,0.25) - 避免用
shadow-none或shadow-sm混合覆盖，容易覆盖自定义 transition
响应式卡片宽度靠 col- + mx-auto 控制，别硬写 width
直接给卡片加 style="width: 300px" 会破坏响应式行为。Bootstrap 卡片本身无宽度约束，需靠栅格系统包裹。
典型结构是：<div class="row"><div class="col-md-6 col-lg-4 mx-auto"><div class="card">...</div></div></div>。其中 mx-auto 在小屏下居中，col- 类控制断点宽度。
-
col-12：全宽（移动端默认） -
col-md-6：中屏起占半宽（两列） -
col-lg-4：大屏起占三分之一（三列） - 去掉
max-width冗余设置，让栅格类自己管理尺寸
悬停发光效果本质是提升 box-shadow 的扩散半径和透明度
“发光”不是加光晕滤镜，而是增强阴影的模糊距离（blur radius）和轻微提亮背景色。CSS 中没有 glow 属性，全靠 box-shadow 多层叠加或单层强化。
更自然的发光感来自两层阴影：一层偏移小、颜色浅，一层无偏移、模糊大。但为简化动画，推荐单层高斯模糊方案：
.card {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.card:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
-
cubic-bezier(0.175, 0.885, 0.32, 1.275)比ease更有弹性，模拟“弹出”感 - 避免用
rgba(255, 255, 255, 0.1)做白光——在浅背景上几乎不可见，且与深色主题冲突 - 如果卡片背景是
bg-light，悬停阴影可略调低透明度（如0.2），否则显得脏
移动端悬停无效？用 @media (hover: hover) 隔离桌面逻辑
手机和平板没有 hover 状态，强制触发会导致误触或卡顿。Bootstrap 不处理这个，得手动加媒体查询隔离。
直接写 .card:hover { ... } 在触摸设备上可能被忽略，也可能意外触发（比如 Safari 模拟 hover）。稳妥做法是包裹在支持 hover 的媒体查询里：
@media (hover: hover) {
.card:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
}
- 不推荐用
pointer: fine，兼容性不如hover: hover - 不要删掉 hover 样式——桌面用户仍需它；只是不让触摸设备加载这段规则
- 如果项目需支持 iOS Safari 的“伪 hover”，需额外监听
touchstart切换 class，但通常没必要
transition 声明位置：它必须写在常态卡片上，而不是 :hover 里。否则动画不会反向执行，鼠标移出时阴影会瞬间消失。 
