Bootstrap按钮内陷阴影需覆盖默认:active样式，推荐用高权重选择器加!important；实心按钮用深色inset阴影+降亮，轮廓按钮用浅色inset；注意移动端:active兼容性，添加touch-action和cursor，并真机测试。
点击时按钮如何触发内陷阴影效果
Bootstrap 默认的 btn 类在 :active 状态下已有轻微内陷，但视觉上不够明显——它靠的是 box-shadow: inset + 边框颜色微调实现的，不是纯靠阴影“凹下去”。想让内陷感更强，必须手动覆盖默认的 :active 样式。
为什么直接加 box-shadow: inset 不生效
因为 Bootstrap 的 .btn:active 规则优先级高（带 !important 或嵌套层级深），单纯在外部 CSS 里写 button:active { box-shadow: inset ... } 很可能被忽略。必须提高选择器权重或用 !important 强制覆盖。
- 推荐写法：
.btn:active { box-shadow: inset 0 2px 4px rgba(0,0,0,.15) !important; } - 避免写成
button:active—— 它匹配不到 Bootstrap 的.btn元素（类名优先级更高） - 注意
inset方向：正值top值（如inset 0 2px）会让阴影向下压，模拟按压感；负值会反向，显得“浮起”
不同按钮类型（btn-primary / btn-outline）的适配差异
轮廓按钮（btn-outline-*）默认 :active 是去边框+背景色变浅，加 inset 阴影后容易和背景融合不清；实心按钮（btn-primary 等）更适合强化内陷。建议分情况处理：
-
btn-primary类：用深色inset阴影（如rgba(0,0,0,.2)）+ 轻微降低background-color（可用filter: brightness(.92)） -
btn-outline-primary类：改用浅色inset（如rgba(255,255,255,.3)）并保留原边框，否则按下去像“消失” - 禁用状态（
disabled）不会触发:active，所以不用管
移动端点击反馈失效怎么办
iOS Safari 和部分安卓浏览器对 :active 支持不稳定，点一下没反应。必须加 touch-action: manipulation 并确保元素可点击（比如加 cursor: pointer）：
.btn {
touch-action: manipulation;
cursor: pointer;
}
如果用了 fastclick 或类似库，反而可能干扰原生 :active，此时应关闭其对按钮的处理，或改用 tap 事件手动加 class 切换样式。
真正要让内陷效果“看起来像按下去”，关键不在阴影多复杂，而在按下/抬起的瞬时对比——颜色、阴影、位移三者微调一点，比堆砌 box-shadow 参数更有效。别忘了测试真机，模拟器常骗人。
