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 的透明度,整个质感就垮了。










