要实现真实按钮按下效果，需同步调整box-shadow与transform：深色背景用浅灰阴影、浅色背景用深灰阴影，模糊值2–4px、扩散值0或负数；:active时缩短阴影偏移、增大透明度，并配合translatey(1px)位移，且必须用transition控制动画，同时适配深色模式。
box-shadow 深浅色配比怎么选才像真按下去
按钮“按下去”的错觉，本质是模拟光源从上方来时，按下后阴影变短、变实，同时按钮自身微向下位移。关键不是加阴影，而是让 box-shadow 的颜色和模糊值匹配当前背景——深色背景用浅灰 rgba(255, 255, 255, 0.2)，浅色背景用深灰 rgba(0, 0, 0, 0.15)；模糊值（blur）要小（2px～4px），扩散值（spread）为 0 或负数（如 -1px）才能压住边缘，避免虚胖。
常见错误：直接套用 box-shadow: 0 4px 8px rgba(0,0,0,0.2)，在白色背景上显得浮肿，在深色背景上又几乎看不见。
:active 状态下必须同步改 shadow 和 transform
只改 box-shadow 不动位置，或只位移不调阴影，都会破功。真实点击是“下沉+遮光”两个动作同时发生。
-
transform: translateY(1px)是最安全的位移量，再大就显假 -
box-shadow在:active中要缩短偏移（比如从0 2px改成0 1px），并加大透明度（比如rgba(0,0,0,0.25)→rgba(0,0,0,0.35)） - 别忘了加
transition: all 0.1s ease，但只过渡box-shadow和transform，否则文字抖动或边框闪烁
移动端 click 延迟会让 :active 失效
原生 Safari 和部分安卓浏览器在非 <button></button> 元素上会忽略 :active，或延迟触发。不是 CSS 写错了，是事件没起来。
解决方式很实际：
- 优先用语义化
<button></button>，而不是<div onclick> <li>给元素加 <code>cursor: pointer和touch-action: manipulation，能提前激活点击态 - 如果必须用
div，加空的ontouchstart=""属性（不用写函数），可绕过 300ms 延迟，让:active可见
深色模式下 box-shadow 容易翻车
一套 box-shadow 值在亮色模式看着立体，切到深色模式可能直接糊成一块黑斑，或者完全隐形。CSS 自定义属性 + @media (prefers-color-scheme: dark) 是唯一靠谱解法。
示例片段：
button {
--shadow-up: 0 1px 2px rgba(0, 0, 0, 0.08);
--shadow-down: 0 1px 3px rgba(0, 0, 0, 0.15);
box-shadow: var(--shadow-up);
transition: box-shadow 0.1s;
}
button:active {
box-shadow: var(--shadow-down);
}
@media (prefers-color-scheme: dark) {
button {
--shadow-up: 0 1px 2px rgba(255, 255, 255, 0.08);
--shadow-down: 0 1px 3px rgba(255, 255, 255, 0.15);
}
}
漏掉这层适配，用户切个系统主题，按钮就突然“不会按了”——这种问题很难复现，但上线后一定被反馈。
