内阴影需控制方向感与明度差：用偏移（如inset 0 2px 4px -2px）模拟受光，浅色值、小模糊（2–4px）和负扩散收边；button上须清border、设background-clip:padding-box、足padding；hover减弱、active反转偏移；移动端需原生button、ontouchstart、touch-action；深色模式需动态配色。
内阴影怎么写才不是“糊成一团”
直接写 box-shadow: inset 0 0 10px rgba(0,0,0,0.3) 很容易让按钮看起来脏、发灰，不是凹陷，是蒙尘。关键在控制「方向感」和「明度差」。
- 必须带偏移：纯
inset 0 0是均匀压暗，真实凹陷一定有受光面——比如inset 0 2px 4px -2px rgba(0,0,0,0.15)，正向垂直偏移模拟顶部受光，负扩散半径收紧阴影边缘 - 颜色要浅：深色背景上别用
rgba(0,0,0,0.3)，改用rgba(255,255,255,0.1)或同色系暗化值（如深蓝按钮配rgba(0,0,0,0.2)） - 避免大模糊：
blur-radius > 6px在内阴影里极易失焦，推荐 2–4px，配合小扩散（-1px到-2px）收边
button 元素上用 inset 阴影要注意什么
不是所有元素都能干净呈现 inset 效果，button 本身有默认 border 和 background-clip 行为，不处理就会盖住或裁掉内阴影。
- 先清掉默认边框：
border: none，否则阴影会被 border 挡住一半 - 显式声明裁剪：
background-clip: padding-box，防止背景色溢出到内阴影区域 - 确保有足够内边距：
padding至少 8px，否则阴影会紧贴文字，失去空间感 - 不要和
border-radius过度叠加：圆角太大（> 12px）时，inset阴影在弧角处易断裂，建议同步降低blur-radius
hover 和 active 状态下内阴影怎么联动
只改背景色或只加位移，会让按钮像被“抠出来”，而不是真正按下去。内阴影必须反向变化才能形成压感。
-
:hover：减弱内阴影强度，比如把inset 0 2px 4px -2px rgba(0,0,0,0.15)改为inset 0 1px 2px -1px rgba(0,0,0,0.08)，模拟轻触抬升 -
:active：增强并反转方向，例如inset 0 -2px 4px -2px rgba(0,0,0,0.25)（注意 v-offset 为负），模拟向下压入 - 过渡必须锁定：
transition: box-shadow 0.12s ease-out，不能写all，否则 background-color 变化会干扰阴影节奏
移动端点击没凹陷反馈？三个硬性检查点
iOS Safari 和部分安卓浏览器对 :active 的内阴影响应极弱，甚至不触发，尤其当按钮嵌套在 div 或 span 里时。
立即学习“前端免费学习笔记（深入）”；
- 优先用原生
<button>：它自带:active伪类支持，且无障碍友好；别用<div onclick>模拟 - 补
ontouchstart=""：哪怕空属性，也能绕过 300ms 延迟，激活:active生命周期 - 加
touch-action: manipulation：告诉浏览器这个区域专用于点击，提前启用触控态，否则内阴影可能只闪一下就消失
最易被忽略的是：深色模式下，inset 阴影的颜色必须动态适配，硬编码 rgba(0,0,0,0.2) 在深色背景上会完全不可见。
