用 box-shadow 模拟按钮凹陷效果需将阴影从下方移至上方（如 0 -2px），配合背景色调暗5–10%、缩小模糊值、增加透明度，并用 :active 伪类触发，辅以 transform: translatey(2px) 补偿视觉下沉。
用 box-shadow 模拟按钮凹陷效果
凹陷感本质是视觉错觉，靠阴影方向和颜色深浅营造“按下去”的假象。关键不是加阴影，而是让阴影从按钮下方移到上方，并配合背景色微调。
正常状态用 box-shadow: 0 4px 6px rgba(0,0,0,0.1)（下偏移+浅黑），按下时改成 box-shadow: 0 -2px 4px rgba(0,0,0,0.15)（上偏移+稍深），同时把 background-color 调暗 5–10%。
- 阴影垂直偏移值必须为负（如
-2px），正数永远是凸起 -
blur值不宜过大，2–4px 更符合物理按压的硬边感 - 避免用
inset阴影——它会遮盖文字、干扰点击反馈，且无法模拟真实凹陷的立体光感
用 :active 伪类触发点击态
浏览器原生 :active 是最轻量、兼容性最好的方案，无需 JS，且能响应触摸和键盘操作。
直接在按钮 CSS 中写：
button {
background-color: #4a90e2;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
transition: all 0.1s ease;
}
button:active {
background-color: #357abd;
box-shadow: 0 -2px 4px rgba(0,0,0,0.15);
transform: translateY(2px);
}
-
transition必须包含box-shadow和background-color，否则阴影突变 -
transform: translateY(2px)补偿视觉下沉，让按钮看起来真“陷”进去了 - 不要用
:hover模拟点击态——它无法反映真实按压时刻，且在移动端无 hover
移动端点击反馈要额外处理
iOS Safari 默认禁用 :active 样式，需手动启用；Android Chrome 有时延迟触发。不处理就会点不动、没凹陷。
- 给
加ontouchstart=""（空事件）或cursor: pointer可激活 iOS 的:active - 更稳妥的做法：加一层
touch-action: manipulation到按钮上 - 若仍失效，用
addEventListener('touchstart', ...)手动加 class，但优先走 CSS 方案
阴影方向翻转时容易忽略的细节
凹陷阴影不是简单上下对调，还要考虑光照逻辑：真实按钮被按下时，顶部受光减弱、底部阴影收窄，所以不能只改 box-shadow 的 y 值。
- 按下态的
rgba第四个参数（透明度）建议比常态高 0.03–0.05，增强“压入感” - 如果按钮有边框，按下时
border-bottom应略加粗（1px → 2px），模拟挤压变形 - 阴影模糊值（第二个数字）按下时宜减小，比如从
6px降到4px，突出硬边缘
真正难的是让凹陷看起来“自然”——不是参数堆砌，而是所有变化同步、节奏一致。哪怕只差 0.02s 的 transition 时长，人眼都会觉得假。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
