按钮点击阴影偏移不生效，主因是未显式声明transition: box-shadow；需同步调整box-shadow的y-offset与transform: translateY，避免立体感断裂。
按钮点击时阴影偏移不生效？检查 transition 是否作用于 box-shadow
直接改 box-shadow 值但没动效，大概率是过渡属性漏写了。CSS 默认不会自动过渡所有属性，必须显式声明：transition: box-shadow 0.15s ease;。如果写了 transition: all 0.15s; 倒也能凑合，但会连字体颜色、边框等一起动，反而干扰焦点；更稳妥的是只过渡阴影和背景色。
常见错误：在 :active 里加了 transform: translateY(1px); 却忘了同步调整 box-shadow 的垂直偏移量，导致“按下”时阴影没跟上位移，立体感断裂。
-
box-shadow的第2个值（y-offset）要和transform: translateY()方向一致、数值接近，比如按下时transform: translateY(2px)，就配box-shadow: 0 2px 4px rgba(0,0,0,0.2) - 松开后恢复原阴影时，y-offset 要设回 0 或原始值（如
0 1px 2px），否则按钮看起来“悬空”或“陷下去”出不来 - 别用
inset阴影模拟按压——它和外阴影行为不一致，且在:active中切换容易闪烁
为什么用 box-shadow 而不是 border 或 outline 模拟立体？
border 是刚性线条，加粗后会撑开布局、影响对齐；outline 不占空间但无法控制方向和模糊度，做不出真实光源感。而 box-shadow 可独立控制 x/y 偏移、模糊半径、扩散距离和透明度，能精准模拟从左上角打光的微凸按钮效果。
典型配置：box-shadow: 0 1px 2px rgba(0,0,0,0.15), 0 2px 0 #ccc; —— 第一层是柔化阴影（表现深度），第二层是硬边投影（表现高光下沿），两层叠加才有“浮起”错觉。
立即学习“前端免费学习笔记（深入）”；
- 第二层硬阴影的
blur-radius必须为 0，spread-radius可略正（如0 2px 0 1px #ccc）来加厚高光边缘 - 颜色别用纯黑/纯灰，
rgba(0,0,0,0.1)比#333更自然；高光色建议比背景色浅 1–2 级，避免刺眼 - 移动端需额外加
*:active { outline: none; }防止点击闪蓝框，但不能因此禁掉所有 focus 样式，可用:focus-visible补充可访问性
:active 状态持续时间太短，手指还没抬起来就恢复了？
这是浏览器默认行为：:active 在 touchend/mouseup 后立刻失效。若想延长“按住”反馈，得用 JavaScript 监听事件手动切 class，或者改用 :focus + tabindex 组合（适合键盘操作）。但多数场景没必要——真实按钮按压本就是瞬时的，过度延长反而失真。
真正要注意的是触控延迟：iOS Safari 默认有 300ms 点击延迟，会导致 :active 响应滞后。解决方法是在 <head> 加 <meta name="viewport" content="width=device-width, initial-scale=1">，并确保没禁用 touch-action: manipulation;。
- 测试时优先用真机，Chrome DevTools 的 device emulation 对
:active模拟不准 - 如果按钮嵌在
position: fixed容器里，某些安卓机型可能触发:active失效，临时方案是加will-change: transform;提升图层 - 别依赖
:active实现核心功能状态（比如开关按钮），它只是视觉反馈；状态变更必须靠 JS 控制 class 或属性
深色模式下阴影发灰、立体感消失？
因为 rgba(0,0,0,0.2) 在深底色上对比度太低。不能简单把 alpha 值调高——那样阴影会变重、像脏污。正确做法是动态换色：用 color-scheme: light dark; 配合 @media (prefers-color-scheme: dark)，把阴影颜色改成浅灰+更低透明度，例如 0 1px 2px rgba(255,255,255,0.08)。
更彻底的解法是定义 CSS 变量：--shadow-light: 0 1px 2px rgba(0,0,0,0.15); --shadow-dark: 0 1px 2px rgba(255,255,255,0.08);，然后在根元素根据主题切换变量值。这样后续维护所有带阴影的组件都只需改变量，不用逐个查 selector。
- 别用
filter: brightness()或opacity整体调暗按钮来适配深色模式——会削弱立体层次 - 高光层（第二层
box-shadow）在深色模式下建议改用rgba(255,255,255,0.15)，而非直接删掉，否则失去“凸起”提示 - 如果用了 CSS Houdini 自定义属性动画，注意部分旧版 Safari 不支持在深色模式下动态更新
box-shadow变量
