Bootstrap按钮加阴影无原生类，v5+默认阴影极淡；推荐用shadow-sm/shadow/shadow-lg工具类或自定义box-shadow，需配transition和:hover增强效果，并注意深色模式、Safari兼容及移动端active样式。
Bootstrap 按钮加阴影用哪个 class？
Bootstrap 本身不提供原生的 .btn-shadow 或类似语义类。它的默认按钮（如 .btn-primary）在 v5+ 中已内置轻微阴影（box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)），但非常淡，几乎不可见。真要明显阴影，得自己加 CSS。
推荐做法是复用 Bootstrap 的工具类或轻量自定义：
- 用
shadow-sm/shadow/shadow-lg这类间距工具类（需 Bootstrap 5+，且按钮必须是position: relative才能生效——默认就是） - 直接写内联 style：
style="box-shadow: 0 4px 12px rgba(0,0,0,.15);" - 避免覆盖
.btn的transition属性，否则悬停阴影会突兀；建议补上transition: box-shadow .2s ease;
为什么给 Bootstrap 按钮加阴影后点击没反馈？
常见原因是阴影层级（z-index）或 pointer-events 干扰，但更大概率是：你加了 box-shadow 却没同步处理 :hover 状态下的阴影变化，导致视觉上“按不下去”。
正确做法是让悬停阴影更强、同时微调位移感：
- 保持基础阴影：
box-shadow: 0 2px 6px rgba(0,0,0,.1); - 悬停时增强：
:hover { box-shadow: 0 4px 12px rgba(0,0,0,.2), 0 2px 0 rgba(0,0,0,.05); }（第二段模拟按下压感） - 别忘了禁用状态：
.btn:disabled { box-shadow: none; opacity: .6; }，否则阴影和透明度冲突
用 shadow-* 工具类 vs 自定义 box-shadow 的取舍
shadow-sm 等工具类本质是预设好的 box-shadow 值，优点是统一、响应式友好；缺点是粒度粗、无法微调模糊半径或颜色。
实际项目中建议：
- 内部管理后台：直接用
shadow，省事，风格一致 - C端营销页或品牌强场景：写自定义 class，比如
.btn-brand-shadow，控制色值（如用主品牌色的透明投影）、适配深色模式（@media (prefers-color-scheme: dark)） - 注意 Safari 旧版本对
box-shadow的渲染差异：避免用超大 spread 值（如4px以上），容易糊边
美化按钮时最容易被忽略的兼容点
不是 IE 兼容——现在基本没人管 IE 了。真正容易翻车的是：
- 深色模式下硬编码的
rgba(0,0,0,.2)投影，在暗背景里可能看不见，应改用color-mix(in srgb, currentColor 20%, transparent)或 CSS 变量 - 用
transform: translateY(1px)模拟按下效果时，若按钮含图标（如<i class="bi bi-cart"></i>），图标可能错位——需给图标也加transform: translateZ(0)强制 GPU 加速 - 移动端点击无反馈：iOS Safari 默认禁用非
a、button元素的 :active 样式，务必确保按钮是<button>或带role="button"+tabindex="0"
