因为Bootstrap按钮默认transition仅作用于background-color和border-color，不包含box-shadow，导致悬停时阴影硬切；必须显式声明transition: box-shadow 0.2s ease-in-out并适配深色模式与移动端。
为什么直接加 box-shadow 悬停会“啪”一下闪出来
因为 Bootstrap 按钮默认虽有 transition，但只作用于 background-color 和 border-color，不包含 box-shadow。你写 .btn:hover { box-shadow: ... } 时，浏览器没被告知“这个属性也要过渡”，结果阴影就硬切。
必须显式补上过渡声明，且建议限定范围，避免影响其他属性：
-
transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;（推荐） - 别用
transition: all 0.2s;——可能意外触发文字模糊或重绘抖动 - 如果同时加了
transform: translateY(-1px)，务必把transform也列入过渡列表，否则位移会突兀
如何让阴影在深色模式下不发灰、不消失
Bootstrap 5.3+ 支持 CSS 媒体查询 @media (prefers-color-scheme: dark)，但 box-shadow 的 rgba 颜色值在暗色背景下容易被吃掉——尤其当 alpha 值太低（如 rgba(0,0,0,.1)）时，几乎不可见。
实操建议：
- 深色模式下改用浅色偏移阴影：
box-shadow: 0 2px 6px rgba(255,255,255,.1); - 或复用 Bootstrap 的 CSS 变量：
box-shadow: 0 2px 6px var(--bs-emphasis-color, rgba(0,0,0,.2));（需确保变量已定义） - 更稳妥的做法是用
color-mix()动态混合（仅支持现代浏览器）：box-shadow: 0 2px 6px color-mix(in srgb, currentColor 15%, transparent);
移动端点击没反馈？:hover 在触屏上根本不可靠
iOS Safari 和多数安卓浏览器不会持续维持 :hover 状态，用户轻点一下，:hover 瞬间触发又消失，阴影“闪一下就没了”。这不是 bug，是规范行为。
必须补充触控反馈：
- 加
:active样式：.btn-shadow-hover:active { transform: translateY(0); box-shadow: 0 1px 3px rgba(0,0,0,.15); } - 用媒体查询隔离鼠标设备：
@media (hover: hover) and (pointer: fine) { .btn-shadow-hover:hover { ... } } - 禁用
:hover在小屏上的副作用：在@media (max-width: 768px)下重置box-shadow为静态值，不依赖悬停
按钮阴影被裁掉？检查最近的父容器是否设了 overflow: hidden
常见于 .card、.modal-body、自定义 .container-fluid 或某些 UI 组件库封装层。它们默认 overflow: hidden，导致 box-shadow 超出边界的那一部分被直接切掉。
调试和修复步骤：
- 用浏览器 DevTools 选中按钮，右键 → “Scroll into view”，再逐级向上看父元素 computed styles 中是否有
overflow: hidden或auto - 临时加
style="overflow: visible !important;"到该父容器验证是否是它导致的 - 正式修复优先用
padding替代overflow: hidden控制内容边界；若必须保留 overflow，则给按钮加position: relative; z-index: 2;并确保父容器有position: relative
overflow 或下面一层的 prefers-color-scheme 响应逻辑。 
