bootstrap 5 卡片默认无阴影，需手动在 .card 根元素添加多层 box-shadow 实现景深效果：垂直偏移逐层增大、模糊半径递增、透明度由淡至浓，避免 inset、彩色阴影及 hover 突变以保性能与视觉真实感。
Bootstrap 5 卡片默认没阴影，box-shadow 必须手动加
Bootstrap 5 的 .card 默认不带任何阴影，不是你漏了类，是它真没设。官方只在悬停态（.card:hover）或部分组件（如 .card-img-overlay）里隐含用到，但基础卡片就是 flat 的。想有阴影，得自己写 box-shadow，别指望 .shadow-sm 这类工具类——它们只对块级元素生效，且层级固定，没法精细控制“深度”。
常见错误现象：
• 加了 .shadow 但阴影发虚、位置偏高，像浮在内容上方
• 用 !important 强行覆盖却导致响应式断点失效
• 在 .card-body 里加阴影，结果阴影被父容器裁掉
- 阴影必须加在
.card根元素上，不是子容器 - 避免用 Bootstrap 自带的
.shadow-*类做深度调节，它们只是预设值，无法分层叠加 - 移动端慎用大扩散值（如
blur: 24px），会模糊文字边缘、影响可读性
box-shadow 分层写法：用多组值模拟真实景深
所谓“深度”，本质是视觉上的前后距离感，单层 box-shadow 只能给一个浮起效果；要模拟真实卡片叠放，得用逗号分隔的多组值，每组控制不同方向/强度的投影：
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); /* 远层：柔和扩散，强化深度
参数差异关键点：
• 第一个值（0）是水平偏移，保持为 0 才让阴影居中
• 第二个值（1px, 2px, 4px）是垂直偏移，越大越“抬高”卡片
• 第三个值（2px, 4px, 12px）是模糊半径，决定阴影软硬程度，远层必须更大才自然
• 透明度（rgba 的 alpha）逐层递增，近层要淡，否则显得脏
- 不要把三组值全写成
0 4px 12px—— 那只是更重的单层影，不是深度 - 避免使用
inset，它会把阴影塞进卡片内部，破坏立体感 - 如果卡片有圆角（
border-radius），确保box-shadow模糊值 ≥ 圆角值，否则阴影边缘会生硬断裂
和 Bootstrap 主题色联动时，box-shadow 别硬套 primary 等变量
有人想让阴影带品牌色，直接把 rgba(var(--bs-primary-rgb), 0.2) 塞进 box-shadow，结果阴影泛蓝、失真。原因：阴影是环境光投射，不是颜色贴图；人眼对彩色阴影极其敏感，稍有偏差就显廉价。
正确做法是保留 rgba(0,0,0, ...) 基底，仅通过调整 alpha 和模糊值来呼应主题：
- 深色主题下，把 alpha 提到
0.2～0.25，模糊值略收（如8px），避免阴影“沉”不下去 - 浅色主题下，alpha 控制在
0.08～0.15，远层模糊拉到16px，增强空气感 - 绝对不要用
hsl()或主题色变量生成阴影色，除非你做了大量视觉校准
性能与兼容性：别在 :hover 里突然加三层 box-shadow
直接给 .card:hover 写三组新 box-shadow 是最常见卡顿源。浏览器要重新计算三次阴影渲染，尤其在低配安卓机或 Safari 上，会出现明显闪烁或掉帧。
解决方法很简单：初始状态就写好所有层，只在 hover 时微调动效参数：
.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);
transition: box-shadow 0.2s ease;
}
.card:hover {
box-shadow: 0 2px 4px rgba(0,0,0,0.08),
0 4px 8px rgba(0,0,0,0.12),
0 8px 24px rgba(0,0,0,0.2);
}
- 过渡时间别超
0.25s，否则用户会觉得“反应慢” - 避免同时过渡
transform和box-shadow，GPU 渲染策略冲突，反而更卡 - IE11 不支持多层
box-shadow，如果还要兼容，只留最后一组最大值，并用@supports包裹分层写法
真正难的不是写出三层阴影，而是让每层的偏移、模糊、透明度之间形成可信的光学关系。调错一个参数，整张卡片就从“悬浮”变成“飘在天上”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
