box-shadow内阴影无效最常见原因是元素无非透明背景，且须写inset、模糊半径不为0；真正内凹需双层反向偏移阴影模拟明暗，圆角下需控制模糊半径或改用伪元素。
box-shadow内阴影为什么加了没效果
最常见原因是元素没有背景色或透明背景，box-shadow 的 inset 阴影会“透”过内容区域，看起来像没生效。它不是画在边框上，而是叠加在元素内容层之下、背景层之上——所以如果背景是透明的，阴影就被底色吃掉了。
- 必须给元素设置非透明背景：
background-color: #fff（哪怕只是#ffffff01也行） -
box-shadow的第四个参数（模糊半径）不能为 0，否则内阴影几乎不可见；建议从2px起步 - 别漏写
inset关键字，写成box-shadow: 0 0 4px rgba(0,0,0,0.2)是外阴影，完全不对
实现真正“内凹”感的参数组合
纯视觉上的“按下去”效果，靠的不是单层阴影，而是多层 box-shadow 叠加模拟明暗交界：顶部亮、底部暗。CSS 支持用逗号分隔多个阴影值。
- 基础内凹写法：
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1), inset 0 -2px 4px rgba(255,255,255,0.6) - 第一段
inset 0 2px...模拟下边缘暗部（向下偏移，加深） - 第二段
inset 0 -2px...模拟上边缘高光（向上偏移，浅色+高透明度） - 注意两个阴影的偏移方向相反，且颜色冷暖/明暗要反着来，否则会变“浮雕”而非“内凹”
和 border-radius 一起用时的坑
圆角 + 内阴影容易出现阴影被裁切、边缘发虚或不贴合的问题，本质是 box-shadow 的渲染优先级低于 border-radius 的裁剪逻辑。
- 确保父容器没设
overflow: hidden，否则阴影可能被意外截断 - 如果用了
border-radius，阴影的模糊半径不宜超过圆角值的一半，比如border-radius: 8px，则blur最好 ≤4px - 更稳妥的做法：把内阴影写在伪元素上（如
::before），主元素只负责圆角和背景，避免层级干扰
移动端 Safari 和旧版 Chrome 的兼容性提醒
绝大多数现代浏览器都支持 inset，但 iOS 12 及更早的 Safari 对多层 inset 阴影渲染不稳定，可能出现闪烁或只显示其中一层。
立即学习“前端免费学习笔记（深入）”；
- 简单场景下，退回到单层：
box-shadow: inset 0 1px 2px rgba(0,0,0,0.08)，兼容性最好 - 不要依赖
box-shadow做关键 UI 状态区分（比如“按下态”），建议配合transform: translateY(1px)或背景色微调 - 如果必须多层且要保 iOS 兼容，得加
-webkit-box-shadow前缀，但仅限老版本，现在基本可省
真正难的不是写对那几行 CSS，而是判断这个“凹”到底要多深、在哪亮哪暗——人眼对光影很敏感，差 1px 偏移或 0.02 的透明度，整个质感就垮了。
