仅靠border变化无法真实模拟按钮凹陷效果，因缺乏明暗过渡的纵深感；应使用两层inset box-shadow（深色下偏+浅色上偏）配合合理offset与blur值，并适配深色模式及移动端交互。
button点击凹陷效果为什么不能只靠border变化
纯靠改border粗细或颜色模拟凹陷，视觉上容易发虚、失真，尤其在高DPI屏或缩放场景下边缘模糊。更关键的是，它无法表现真实的“按下去”的纵深感——人眼识别凹陷主要依赖明暗过渡，而不是边框位移。
用box-shadow加inset是更可靠的选择：它直接在元素内部投射阴影，配合方向和颜色控制，能精准模拟光源从上方照射时按钮表面被压下的明暗分布。
- 必须设
box-shadow: inset，漏掉inset就变成外阴影，完全达不到凹陷效果 - 推荐用两层
inset阴影：一层深色向下偏移（模拟暗部），一层浅色向上偏移（模拟高光），比单层更立体 - 避免用
rgba(0,0,0,0.5)这类默认灰黑——实际按钮材质常带环境色，比如#333配#eee比纯黑/白更自然
click态的box-shadow参数怎么配才不突兀
凹陷不是越深越好。过重的inset阴影会让按钮像被挖掉一块，破坏整体轻量感。核心是控制offset和blur比例：垂直偏移通常取2px–4px，模糊值建议为偏移量的1–1.5倍，这样过渡柔和。
下面这个值是多数场景下经实测不跳变的组合：
立即学习“前端免费学习笔记（深入）”；
button:active {
box-shadow: inset 0 2px 4px rgba(0,0,0,0.15), inset 0 -1px 2px rgba(255,255,255,0.5);
}
-
inset 0 2px 4px：向下2px的微弱暗影，模拟受压面背光 -
inset 0 -1px 2px：向上1px的浅色高光，模拟边缘反光 - 两层阴影
color透明度都别超0.6，否则盖住按钮底色 - 如果按钮有
border-radius，阴影会自动贴合圆角，无需额外处理
移动端click态失效或延迟怎么办
iOS Safari和部分安卓WebView对:active伪类支持不稳定，轻点可能不触发，长按又会误触发。这不是box-shadow的问题，而是事件机制差异导致的。
- 必须加
cursor: pointer，否则某些安卓浏览器忽略:active - 在
里加<meta name="viewport" content="width=device-width, initial-scale=1">，禁用双击缩放能提升:active响应率 - 更稳妥的做法是用JS监听
touchstart/touchend，动态增删.is-pressed类，再写对应CSS - 注意：不要同时写
:active和.is-pressed，否则iOS可能叠加触发两次样式变化
深色模式下inset阴影发灰看不清
深色背景上，rgba(0,0,0,0.15)这种为浅色设计的暗影几乎不可见。不能简单调高透明度——那样会在浅色模式下过重。
- 用
@media (prefers-color-scheme: dark)单独覆盖阴影值 - 深色模式下把暗部阴影换成
rgba(0,0,0,0.3)，高光部分改用rgba(255,255,255,0.1)，避免刺眼 - 如果项目已用CSS变量，建议把阴影值抽成
--shadow-inset-dark和--shadow-inset-light，后续维护更清晰 - 别忘了测试
forced-colors: active场景，此时所有box-shadow会被系统强制清除，需用border或background降级兜底
真正难的不是写出那行box-shadow，而是判断当前按钮的材质感、所处背景的明暗、目标设备的交互特性——这些都会让同一组参数在不同页面里效果迥异。多在真机上点几次，比对着文档调十次数值更有用。
