box-shadow实现阴影按钮需确保多层用逗号分隔、默认态设transition和轻量阴影、移动端补:active或JS类、内凹用双inset组合、规避overflow裁剪及深色模式适配。
直接用 box-shadow 就能做出可用的阴影按钮，但多数人卡在“为什么悬停没反应”“为什么手机点不动”“为什么阴影糊成一片”——核心不是参数调得有多炫，而是写法、顺序和上下文是否匹配。
box-shadow 多层写法必须用逗号分隔，不能重复声明
很多人复制两行 box-shadow 声明，结果只生效最后一层。CSS 不支持属性覆盖式叠加，只认最后一个同名属性。
- 错误写法：
box-shadow: 0 2px 4px rgba(0,0,0,0.1);然后另起一行再写box-shadow: 0 4px 12px rgba(0,0,0,0.08); - 正确写法：
box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.08); - 顺序决定图层：靠前的阴影在视觉底层（比如大而淡的扩散光），靠后的在上层（比如紧贴按钮的主投影）
- 每层参数必须完整：漏掉模糊半径或颜色，整条声明会失效；
inset要么放最前，要么放最后，不能插在中间
:hover 阴影必须配 transition，且默认态不能留空
没加 transition 的 :hover 阴影，变化是硬切的；默认态如果没显式设 box-shadow，浏览器可能从“无”到“有”触发重排，导致按钮轻微跳动。
- 默认态建议写：
box-shadow: 0 1px 2px rgba(0,0,0,0.08);或极轻的box-shadow: 0 0 0 transparent; -
:hover中只改需要变的值，比如：box-shadow: 0 2px 8px rgba(0,0,0,0.15), 0 4px 16px rgba(0,0,0,0.1); - 过渡只锁定相关属性：
transition: box-shadow 0.15s ease;，别用all，尤其当同时用了transform时容易插值出错 - 移动端不触发
:hover，必须补:focus-visible和:active，否则真机点击完全没反馈
内凹按钮要用两层 inset 阴影，单层无效
box-shadow: inset 0 0 6px rgba(0,0,0,0.2) 只是一团灰雾，没有“压进去”的视觉逻辑。人眼识别凹陷靠的是顶部暗、底部亮的受光关系。
立即学习“前端免费学习笔记（深入）”；
- 必须组合两层：
inset 0 2px 4px rgba(0,0,0,0.15)（向下偏移，模拟上沿背光） +inset 0 -1px 2px rgba(255,255,255,0.6)（向上偏移，底部加细高光） - 背景色不能太深或太浅：
#f0f0f0这类中性灰底效果最稳；纯白底会让高光消失，深色底则让暗部不可见 -
:active状态要同步调整两层偏移和模糊值，比如把inset 0 2px改成inset 0 3px，同时高光层inset 0 -1px改为inset 0 -2px - 移动端
:active不稳定，建议用 JS 切换.is-pressed类来控制，比纯 CSS 更可靠
移动端阴影裁剪和渲染异常怎么绕开
真机上阴影突然消失、边缘发虚、点击热区缩小——往往不是代码错，而是父容器或渲染策略限制。
- 检查父级是否设了
overflow: hidden，它会直接裁掉超出边界的阴影 - 大
border-radius（如50%）在旧版 WebKit 下可能导致阴影变形，可加transform: translateZ(0)强制 GPU 加速 - iOS Safari 对多层大模糊阴影重绘吃力，建议模糊半径不超过
6px，透明度别超0.2 - 深色模式下，
rgba(0,0,0,0.1)在黑底上几乎不可见，需用媒体查询单独覆盖：@media (prefers-color-scheme: dark) { button { box-shadow: 0 2px 6px rgba(255,255,255,0.08); } }
真正难的不是调出某一种阴影效果，而是让同一套样式在桌面悬停、键盘焦点、触摸按下、深色模式、低端设备上都保持意图一致——阴影只是层次提示，不是主角，别让它抢走按钮本身的操作信号。
