bootstrap怎么设置卡片（Card）的阴影效果

Bootstrap 4/5 提供 shadow-sm、shadow、shadow-lg 和 shadow-none 四类阴影工具类，但需确保 $enable-shadows 为 true；hover 阴影需手动写 CSS；card-group 会裁剪阴影，应改用 row+col 或 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测试工具