bootstrap 4卡片阴影失效主因是sass变量$enable-shadows设为false，需检查_variables.scss并确认其值为true；shadow-sm/shadow/shadow-lg对应三档固定值，悬停需手动添加transition，card-group因overflow:hidden会裁切阴影。
Bootstrap 4 卡片默认有阴影，但非常轻（shadow-sm级别），直接加 shadow 或 shadow-lg 类就能出效果——前提是你的项目没关掉阴影开关。
为什么加了 shadow 还没影子？检查 $enable-shadows
Bootstrap 4 默认启用阴影，但早期版本（如 4.0.0）或自定义编译时可能把 $enable-shadows: false 写进了 Sass 变量。一旦关掉，所有 shadow-* 工具类都会失效，连 .card 自带的那点微影也没了。
- 查你项目里是否用了自定义
_variables.scss，确认$enable-shadows是true - 没改过源码？直接在浏览器控制台运行
getComputedStyle(document.querySelector('.card')).boxShadow，返回"none"就是被关了 - 临时修复：加一行内联样式
style="box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);"，验证是否真为变量问题
shadow-sm / shadow / shadow-lg 的实际效果差异
这三类工具类对应的是三档固定值，不是“越往后越深”，而是按使用场景分级：
-
shadow-sm：值为0 .125rem .25rem rgba(0,0,0,.075)，适合仪表盘小卡片、标签页内嵌块，太重反而压不住内容 -
shadow（无后缀）：值为0 .5rem 1rem rgba(0,0,0,.15)，最常用，平衡立体感与性能，移动端也稳 -
shadow-lg：值为0 1rem 3rem rgba(0,0,0,.175)，适合模态框、焦点主卡；但别用在密集列表里，视觉重量会拖慢感知节奏
注意：shadow-lg 在高 DPI 屏幕上模糊半径过大，可能显得发虚——可手动覆盖为 0 1rem 2rem rgba(0,0,0,.15) 更干净。
想让卡片悬停时“浮起来”？必须手动补 transition
Bootstrap 4 的 .card 默认没声明任何过渡行为，只写 .card:hover { box-shadow: ... } 会导致 Safari 跳变、Chrome 动画卡顿。
- 必须在常态规则里加：
.card { transition: box-shadow .2s ease-in-out; } - 别用
transition: all——border-color或background同时动会分散注意力 - 悬停阴影建议复用原生值微调：比如从
0 .5rem 1rem rgba(0,0,0,.15)改成0 .75rem 1.5rem rgba(0,0,0,.2)，偏移和透明度同步加，别只拉模糊半径 - 移动端点击无反馈？iOS 不触发
:hover，得靠 JS 切换类或加tabindex="0"+:focus回退
card-group 会吃掉阴影，换布局比硬 hack 更可靠
这是 Bootstrap 4 最隐蔽的坑：.card-group 内部设了 overflow: hidden，所有子卡片的 box-shadow 都会被裁掉，只留外框一圈残影。
- 别给
.card-group > .card加position: relative或z-index——没用，裁切发生在父容器层 - 正解是换布局：用
.row > .col > .card，或 Bootstrap 4 的.card-deck（它用 flex 布局且不设 overflow） - 如果必须用
card-group，唯一办法是删掉它的overflow: hidden，但会破坏卡片间距逻辑，风险自担
多层阴影、动态过渡、父容器裁切——这些细节不显眼，但漏掉任何一个，卡片就只是平的。真正影响立体感的，从来不是参数堆得多，而是哪一层被悄悄截断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
