按钮按下时box-shadow内阴影无变化，主因是transition未显式声明box-shadow属性；需确保:active中inset阴影不被overflow或层叠上下文遮挡，并搭配背景色变化营造下陷感。
button按下时box-shadow内阴影没变化？检查transition作用属性
直接原因：你写的 transition 没覆盖 box-shadow，或者写了但用了简写导致被覆盖。CSS transition 不会自动监听所有变化，必须显式声明要过渡的属性。
-
transition: all 0.2s看似万能，但实际中常因浏览器渲染策略或层叠顺序失效，尤其在涉及box-shadow和transform混用时 - 稳妥写法是只过渡明确需要的属性：
transition: box-shadow 0.15s ease, background-color 0.15s ease - 如果同时改了
padding或border，也要加进去，否则那些变化会突兀跳变
:active伪类里box-shadow用inset却没效果？确认z-index和层叠上下文
内阴影（inset）本身不会“下陷”，它只是把阴影画在元素内部；真正产生下陷感，靠的是配合背景色变深 + 边框微调 + 阴影方向与明暗对比。但很多人卡在阴影压根不显示。
- 确保按钮没设置
overflow: hidden，否则inset阴影可能被裁掉 - 如果按钮父容器有
transform、filter或will-change，可能创建新层叠上下文，导致:active的阴影被其他元素遮挡 - 别依赖默认
z-index：给按钮加position: relative; z-index: 1;，避免被兄弟元素盖住
移动端点击无响应？:active在iOS/Android上需要额外触发条件
原生 :active 在触摸设备上默认延迟约300ms，且部分安卓WebView或iOS Safari需用户真实“按住”才触发——松开就回退，来不及看到下陷动画。
- 加
touch-action: manipulation;到按钮上，减少延迟并提升触控响应 - 更可靠的做法是用JS监听
touchstart/touchend，切换一个类名（如.is-pressed），再用CSS控制该类下的box-shadow: inset - 注意：不要在
touchstart里用preventDefault()，除非你处理了所有滚动逻辑，否则会禁用页面滑动
阴影过渡卡顿或闪烁？避免layout thrashing和重绘范围过大
box-shadow 变化本身是合成属性（composited），但若伴随 width、height、margin 等触发重排（reflow）的改动，动画就会掉帧。
立即学习“前端免费学习笔记（深入）”；
- 只动
box-shadow和background-color—— 这两个是GPU加速的，最稳 - 避免在
:active中改border宽度：哪怕只差1px，也可能触发重排；改用outline或调整box-shadow的模糊半径模拟边框感 - 测试时打开Chrome DevTools → Rendering → “Paint flashing”，看按下时是否大面积闪绿；如果有，说明重绘区域太大
box-shadow: inset 当成“自动下陷”，而忘了它必须搭配明暗对比和视觉锚点（比如按钮边缘的微弱高光）才有深度感。单靠阴影数值调来调去，不如先定好正常态和按下态的色值差。 
