bootstrap 5 卡片默认无阴影，需手动在.card根元素添加多层box-shadow实现景深：0 1px 2px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.15)，并显式声明.card{transition:box-shadow 0.2s ease-in-out}。
Bootstrap 5 卡片默认没阴影，必须手动加 box-shadow
不是你漏写了类，是 Bootstrap 5 的 .card 根元素真没设任何 box-shadow。官方只在 .card:hover 或个别子组件（如 .card-img-overlay）里隐含使用，基础卡片就是平的。别指望 .shadow-sm 这类工具类能“自动生效”——它们只对块级元素起作用，且层级固定，无法模拟真实景深。
多层 box-shadow 才算有深度，单层只是浮起
所谓“深度”，是视觉上感知的前后距离。单组值（比如 0 4px 12px rgba(0,0,0,0.1)）只能让卡片看起来“抬起来”，但不立体。要模拟真实叠放效果，得用逗号分隔的多组值：
-
0 1px 2px rgba(0,0,0,0.05)：近层，轻柔底部微影，垂直偏移小、模糊小、透明度最淡 -
0 2px 4px rgba(0,0,0,0.1)：中层，主体浮起感，偏移与模糊适中 -
0 4px 12px rgba(0,0,0,0.15)：远层，柔和扩散，强化空间感，模糊必须更大才自然
注意：三组的水平偏移都保持 0，否则阴影会歪；别把所有值都写成 0 4px 12px——那只是更重的单层影，不是深度。
transition: box-shadow 必须写在常态规则里
只在 .card:hover 里改 box-shadow，阴影大概率“啪”一下跳变，甚至 Safari 直接忽略。原因：Bootstrap 默认没声明过渡行为。必须显式加在常态规则中：
.card {
box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.1);
transition: box-shadow 0.2s ease-in-out;
}
关键点：
- 写在
.card上，不是.card:hover里 - 只过渡
box-shadow，别用transition: all，否则边框、背景色也会动 - 起始和结束状态的阴影层数必须一致（比如都用两层），否则动画会失效或闪烁
移动端阴影被裁、点按无反应？先查 overflow: hidden 和 :hover 限制
真机点一下阴影没变化，不是代码错，是规范行为：iOS Safari 和 Android Chrome 不把单次触控当 :hover。更常见的是阴影“被砍掉一半”，主因是父容器设置了 overflow: hidden（比如 .card-group、.row、自定义 wrapper）。box-shadow 绘制在盒模型外部，但会被祖先的 overflow 硬裁切。
排查和解法：
- 临时加
outline: 1px solid red到父容器，看阴影是否刚好卡在 outline 边上 - 删掉或改成
overflow: visible；若结构不能改，给卡片加position: relative; z-index: 1 - 移动端交互依赖阴影反馈时，别只靠
:hover：加tabindex="0"，再写.card:focus；或用 JS 切换.is-hovered类
真正容易被忽略的，是阴影参数在高 DPI 屏上的渲染表现：避开小数像素（如 0.5px），模糊半径别低于 2px，浅色背景上 rgba(0,0,0,0.08) 比 0.15 更干净。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
