bootstrap无悬停阴影内置类，需用自定义css：.btn-shadow-hover:hover配box-shadow+transition实现平滑效果；注意父容器overflow裁剪、深色模式适配及移动端hover兼容性问题。
hover 时用 box-shadow 实现阴影效果
bootstrap 本身不提供“悬停自动加阴影”的内置类，但完全可以用原生 css 配合 box-shadow 实现。关键不是找 bootstrap 的 class，而是给按钮加自定义 hover 样式。
常见错误是直接写 .btn:hover { box-shadow: 0 4px 8px rgba(0,0,0,.2); }，但没考虑 Bootstrap 按钮默认有 transition，导致阴影进出突兀——必须显式加过渡动画才自然。
- 推荐在按钮 class 后追加自定义 class，比如
btn btn-primary btn-shadow-hover - 对应 CSS 写成：
.btn-shadow-hover:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); transform: translateY(-1px); /* 可选：轻微上浮增强反馈 */ } - 务必补上
transition: all 0.2s ease-in-out;，否则阴影会“啪”一下闪出来
避免阴影被父容器裁剪（overflow-hidden 问题）
很多 Bootstrap 布局容器（比如 .card、.container-fluid 或自定义 overflow: hidden 的 div）会把超出边界的 box-shadow 切掉，导致悬停时阴影“断一半”。
- 检查按钮最近的父级是否有
overflow: hidden或overflow: auto - 临时调试可用浏览器开发者工具高亮父元素，看是否带
overflow样式 - 修复方式：给该父容器加
overflow: visible，或改用padding替代overflow控制布局
适配深色模式下的阴影可见性
Bootstrap 5.3+ 支持 data-bs-theme="dark"，但默认 box-shadow 用的是 rgba(0,0,0,.15)，在深色背景上几乎看不见。
- 别硬编码黑影值，改用
color-mix()或 CSS 自定义属性动态调整 - 简单方案：用
filter: drop-shadow()替代box-shadow，它不受父容器 overflow 影响，且能随背景自动反色（部分浏览器支持） - 更稳妥做法：
@media (prefers-color-scheme: dark) { .btn-shadow-hover:hover { box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1); } }
移动端触摸反馈与阴影冲突
在 iOS Safari 或安卓 Chrome 上，按钮点击瞬间会触发 :active 状态，如果同时监听 :hover 和 :active，可能造成阴影闪烁或延迟消失。
- 移动端没有真正 hover，
:hover仅在触摸后短暂生效，容易误判 - 建议对触屏设备禁用 hover 阴影：
@media (hover: hover) and (pointer: fine) { .btn-shadow-hover:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } } - 若需统一反馈，改用
:focus-visible或 JS 监听touchstart添加临时 class 更可靠
阴影本身很简单，难的是它和 Bootstrap 的默认样式、父容器限制、深色模式、触控逻辑这四层关系怎么不互相打架。动手前先 inspect 元素，看阴影到底被谁吃掉了。
