Bootstrap 4/5 提供 shadow-sm、shadow、shadow-lg 和 shadow-none 四类阴影工具类但需确保 $enable-shadows 为 truehover 阴影需手动写 CSScard-group 会裁剪阴影应改用 rowcol 或 card-deck/Flex自定义深度须修改 Sass 变量或 CSS 自定义属性。Bootstrap 4/5 中直接用 shadow-* 类就能加阴影bootstrap 4 起内置了开箱即用的阴影工具类不需要写 css、也不用改 sass 变量——只要你的项目启用了阴影默认是启用的直接加类就行。核心类名有shadow-sm、shadow、shadow-lg还有 shadow-none 用于清除。常见错误现象卡片没阴影但代码里写了 shadow —— 很可能是你用的是 Bootstrap 4 早期版本如 4.0.0那时 $enable-shadows 默认为 false或者你用了自定义编译手动关掉了它。shadow-sm适合轻量卡片比如仪表盘小数据卡shadow无后缀中等深度最常用对应 box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)shadow-lg适合模态框、高亮主卡但移动端慎用——太重会削弱内容焦点Bootstrap 5 不再支持 shadow-2dp 这类 Material Design 风格命名那是 TODC Bootstrap 的扩展hover 时动态加阴影必须自己写 CSSBootstrap 官方不提供 shadow-hover 这类工具类。想实现“鼠标移上才显影”得补一行 CSS否则只靠 shadow-sm 是静态常驻的。使用场景后台菜单卡片、产品展示页、交互式仪表板——用户需要视觉反馈确认可点击区域。实操建议复用 Bootstrap 原生阴影值避免风格割裂card:hover { box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;}注意点别漏掉 !important除非你用的是 Bootstrap 5.3 并启用了 utilities 的 hover 变体别用 transition 硬套所有属性只过渡 box-shadow 更稳transition: box-shadow .2s ease;在深色背景上rgba(0,0,0,.15) 可能不够明显可微调 alpha 值或换 hsla()卡片组card-group会覆盖单个卡片的阴影这是最容易踩的坑你给每个 .card 都加了 shadow-lg结果渲染出来只有外框一圈有影子——因为 .card-group 内部用 overflow: hidden 切掉了内部卡片的阴影溢出部分。 VWO 一个A/B测试工具