按钮点击阴影变深的本质是利用:active伪类动态修改CSS变量--shadow-depth控制box-shadow垂直偏移，配合transform:translateY实现下陷效果，通过transition实现顺滑过渡，需注意浏览器兼容性与暗色模式适配。
按钮点击时阴影变深的原理是什么
本质是利用 :active 伪类 + box-shadow 的动态变化，配合 CSS 变量让阴影参数可被 JavaScript 或状态切换控制。不是靠动画帧或 JS 插值，而是纯 CSS 的声明式响应——只要变量更新，阴影立刻重算。
用 --shadow-depth 变量控制阴影偏移和模糊
直接写死 box-shadow: 0 4px 8px rgba(0,0,0,0.2) 没法响应点击；换成变量后，:active 里改变量值就能“压下去”：
button {
--shadow-depth: 2px;
box-shadow: 0 var(--shadow-depth) 6px rgba(0,0,0,0.15);
}
button:active {
--shadow-depth: 4px;
}
-
--shadow-depth控制垂直偏移，数值越大越“沉” - 模糊半径（如
6px）建议保持不变，否则会显得虚化失真 - 透明度可同步微调，比如
:active中设为rgba(0,0,0,0.25)增强厚重感 - 注意：Chrome/Safari 支持变量在
box-shadow中计算，但旧版 Firefox 需要 fallback
为什么 :active 状态一闪而过？
这不是 bug，是浏览器默认行为：手指松开、鼠标抬起，:active 就结束。想延长“按下去”的视觉反馈，不能只靠它：
- 加
transition: box-shadow 0.1s ease让进出更顺滑（别超过 0.15s，否则像卡顿） - 如果需要“按住不放”的持续态，得用 JavaScript 切换 class，比如
.is-pressed - 移动端要注意
:active在 iOS Safari 默认不触发，需加cursor: pointer或tapping相关 meta - 别用
!important强盖变量，容易和主题色系统冲突
和 transform: translateY() 搭配用效果更真实
光改阴影不够“下陷”，加上轻微位移才符合物理直觉：
button {
--shadow-depth: 2px;
transition: transform 0.1s, box-shadow 0.1s;
}
button:active {
--shadow-depth: 4px;
transform: translateY(2px);
}
-
transform: translateY()比修改top更高效，不触发重排 - 位移量（如
2px）建议是阴影增量的一半，避免“飘起来”或“掉出容器” - 如果按钮有边框，
box-shadow扩展可能被裁剪，检查父容器是否设置了overflow: hidden - 暗色模式下，别忘了用
@media (prefers-color-scheme: dark)调整阴影颜色，比如改用rgba(0,0,0,0.3)
真实项目里最容易漏的是过渡时间一致性——box-shadow 和 transform 的 transition 必须完全一致，差 10ms 都会觉得“不同步”。还有就是移动端 :active 的兼容补丁，很多人测完 Chrome 就上线，结果 iOS 用户点不动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
