按钮悬停阴影需显式声明 transition: box-shadow 0.2s ease-in-out，否则突兀闪现；须同步添加 transform 到 transition 中；父容器 overflow-hidden 会裁剪阴影，应改用 padding 留白；移动端需用 @media (hover: hover) 和 :active 区分交互；深色模式下需用 prefers-color-scheme 调整阴影颜色。
按钮悬停阴影必须配 transition 才不突兀
直接写 .btn:hover { box-shadow: 0 4px 12px rgba(0,0,0,.15); }，阴影会“啪”一下闪出来——因为 Bootstrap 的 .btn 默认虽有 transition，但只覆盖 color、background-color 和 border-color，没管 box-shadow。
必须显式声明过渡效果：
- 加
transition: box-shadow 0.2s ease-in-out;到悬停类里（不是全局.btn） - 别用
transition: all，否则拖慢其他无关属性更新 - 如果同时加
transform: translateY(-1px)，记得把transform也列进transition，否则位移和阴影不同步
父容器 overflow-hidden 会切掉阴影
很多 Bootstrap 布局容器（比如 .card、.container-fluid 或自定义的 overflow: hidden div）会把超出边界的 box-shadow 直接裁掉，导致悬停时阴影“断一半”。
调试和修复方法：
- 用浏览器开发者工具高亮按钮最近的父级，看是否带
overflow: hidden或overflow: auto - 临时加
overflow: visible到该父容器（不是按钮本身） - 更稳妥做法：去掉
overflow: hidden，改用padding留白，让阴影自然溢出
移动端不能依赖 :hover 实现稳定反馈
iOS Safari 和部分安卓 Chrome 会在点击后短暂模拟 :hover，但松手就消失，造成阴影“闪一下就没了”，体验割裂。
真正可用的方案：
- 用媒体查询限定仅鼠标设备生效：
@media (hover: hover) and (pointer: fine) { .btn-shadow-hover:hover { ... } } - 对触屏设备，改用
:active模拟按下反馈：.btn-shadow-hover:active { box-shadow: 0 2px 6px rgba(0,0,0,.1); } - 避免在小屏上启用发光类（如
box-shadow: 0 0 12px），容易溢出相邻元素或遮挡内容
深色模式下阴影默认不可见
Bootstrap 5.3+ 支持 data-bs-theme="dark"，但默认 rgba(0,0,0,.15) 在深色背景上几乎透明，看起来像没加阴影。
适配要点：
- 别硬编码黑影值，优先用
@media (prefers-color-scheme: dark)覆盖 - 示例：
@media (prefers-color-scheme: dark) { .btn-shadow-hover:hover { box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1); } } - 或者改用
filter: drop-shadow()，它不受父容器overflow影响，且部分浏览器能自动反色（但兼容性略弱于box-shadow）
transform 必须共用同一 transition 声明，否则在快速进出时会出现视觉脱节。
