:active伪类需手动叠加transform位移与inset阴影模拟真实按压感，配合0.1s ease过渡、统一border-width及outline处理，避免性能耗操作以确保瞬时反馈。
button 的 :active 伪类是核心，但默认行为不够明显
浏览器对 :active 的默认处理只是短暂改变焦点或轻微压暗，几乎看不出“向内凹陷”效果。必须手动覆盖 box-shadow 和 transform 才能模拟真实按压感。
- 只改背景色或边框色容易显得单薄，缺乏立体反馈
-
:active状态持续时间极短（约 100–200ms），需确保样式变化足够快、足够可感知 - 移动端 touch 事件触发
:active有延迟或不触发，需配合touch-action: manipulation
用 box-shadow 内阴影 + transform: translateY() 模拟物理按压
凹陷的本质是视觉上“被压进去”，靠两层叠加：表面下沉（transform）+ 暗部收缩（inset 阴影）。两者缺一不可，否则只剩平移或只剩阴影，都不像真按钮。
button {
padding: 8px 16px;
border: 1px solid #ccc;
background: #f5f5f5;
transition: all 0.1s ease;
}
<p>button:active {
transform: translateY(1px); /<em> 往下微移，制造“被按下去”的错觉 </em>/
box-shadow: inset 0 2px 4px rgba(0,0,0,0.15); /<em> 内阴影强化凹陷感 </em>/
}</p>
-
transform: translateY(1px)比scale更自然——真实按钮不会缩小，只会位移 -
inset阴影的y偏移量建议设为正数（如2px），方向朝下，匹配按压方向 - 务必加
transition: all 0.1s ease，否则变化会突兀；不要用ease-in-out，它会让按压和回弹节奏失真
避免常见坑：border、outline 和 focus 状态干扰
很多按钮点击后边缘发虚、跳动或出现蓝框，其实是 outline 或 border 在不同状态间宽度/颜色不一致导致的。
- 显式声明
outline: none或outline: 2px solid transparent，保留可访问性聚焦样式但不破坏视觉 - 所有状态（
:hover、:active、:focus）的border-width必须一致，否则transform会引发布局抖动 - 如果用了
border-radius，:active中不要改圆角值——半径变化会让按钮“缩放”，破坏凹陷预期 - 慎用
background-color: transparent在:active中，透明背景会让内阴影失效
兼容性与性能提醒：别在 :active 里触发动画或重排
:active 是瞬态伪类，浏览器不会为其做复杂计算。任何耗性能操作都会卡顿或直接被忽略。
- 避免在
:active中设置filter（如blur）、clip-path或大量box-shadow层叠 - 不要用
@keyframes动画绑定到:active——它不会播放，CSS 动画不响应伪类切换 - IE11 及更早版本不支持
inset阴影，若需兼容，可用background-image: linear-gradient()模拟暗边，但效果略弱
真正难的是让凹陷看起来“刚好”：太浅像没按，太深像卡住。调参时盯着按钮反复点十次，比看代码更重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
