点击时通过 :active 伪类动态修改 box-shadow 的前两个偏移值并配合 transition: box-shadow 实现平滑按下效果，比 z-index 或 transform 更优，因不触发重排、阴影联动自然且兼容性好。
点击时box-shadow偏移量怎么动态改
直接改 box-shadow 的前两个值（水平/垂直偏移）就能模拟按下效果，不需要 JS 操控多个属性。关键在于用 :active 伪类配合过渡，让偏移变化有缓动感。
常见错误是只改颜色或模糊度，结果按钮“陷下去”的视觉反馈很弱；或者加了 transition 却漏写 box-shadow 在过渡属性列表里，导致偏移跳变。
-
box-shadow: 0 4px 8px rgba(0,0,0,0.2)是常态（轻微浮起） -
:active { box-shadow: 2px 2px 4px rgba(0,0,0,0.3) }表示按下后阴影右下偏移减小、更紧凑，视觉上像被压下去 - 必须显式声明
transition: box-shadow 0.15s ease，否则偏移不会平滑变化
为什么用偏移量而不是改变z-index或transform
z-index 对非定位元素无效，且无法和阴影联动；transform: translateY() 虽能位移按钮本身，但阴影位置不会跟着动，容易出现“按钮下沉、阴影还悬在原处”的割裂感。
用 box-shadow 偏移是纯视觉层操作，不干扰布局流，兼容性好（IE10+），也不触发重排（reflow）。
立即学习“前端免费学习笔记（深入）”；
- 移动端需注意：部分 iOS Safari 版本对
:active响应延迟，可加cursor: pointer或监听touchstart来补救 - 如果按钮带
border-radius，阴影偏移后边缘模糊可能略显毛刺，适当加大spread radius（第四个值）能缓解
多层阴影叠加实现更强立体感
单层阴影偏移力度有限，用逗号分隔的多层 box-shadow 可分别控制内凹、外压、高光效果。
例如按下态可设两层：一层紧贴按钮底边的深色短偏移（模拟接触面压痕），一层稍远的浅色长偏移（模拟环境光遮挡）。
- 常态：
box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.08) - 按下态：
box-shadow: 1px 1px 2px rgba(0,0,0,0.25), 0 2px 6px rgba(0,0,0,0.12) - 注意顺序：前面的阴影在上层，所以内凹效果要写在前面
实际项目中容易被忽略的细节
按钮背景色和阴影颜色的明度差不够时，按下去的对比度变化会不明显；另外，如果父容器有 overflow: hidden，过大的阴影偏移会被裁切，导致按下效果“半截消失”。
- 阴影颜色建议用比背景色暗 20–30% 的同色系，比如浅灰按钮配
rgba(0,0,0,0.2)，深蓝按钮配rgba(0,0,0,0.4) - 测试时务必在真实设备上点按，模拟器常无法准确还原
:active的触发时机和持续时间 - 若按钮含文字图标（如 Font Awesome），按下时建议同步微调
transform: scale(0.98)，避免纯阴影带来的“空洞感”
