最常见的问题是漏掉 inset 关键字或位置错误;内阴影需紧接 box-shadow 后,且受 padding、background、overflow 影响易被遮挡或裁剪。

box-shadow inset 写法不对,阴影出不来
最常见的问题是漏掉 inset 关键字,或者把它放在了错误位置。CSS 的 box-shadow 默认是外阴影,不加 inset 永远不会往里投。
-
box-shadow: 0 2px 4px rgba(0,0,0,0.2);→ 只有外阴影 -
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);→ 正确的内阴影写法 -
box-shadow: 0 2px 4px inset rgba(0,0,0,0.2);→ 错误:inset必须紧接在函数名后,不能插在中间
容器没显示内阴影,可能是背景色或 overflow 挡住了
内阴影会画在内容区和边框之间,如果容器有纯色背景、没有留白,或者设置了 overflow: hidden,阴影很可能被裁掉或盖住。
- 确保容器有足够内边距(
padding),否则阴影紧贴内容,视觉上难察觉 - 避免用
background-color: white直接盖住阴影;可改用半透明白色(rgba(255,255,255,0.9))让阴影透出来 - 检查父容器是否设了
overflow: hidden,它会把超出 padding 区域的内阴影直接裁掉
多层内阴影叠加时,inset 参数顺序影响渲染效果
box-shadow 支持多个阴影逗号分隔,但所有内阴影必须统一用 inset,混用内外会导致部分失效。
-
box-shadow: inset 0 -2px 4px #000, inset 0 2px 4px #000;→ 上下双内阴影,有效 -
box-shadow: inset 0 -2px 4px #000, 0 2px 4px #000;→ 第二个是外阴影,可能破坏预期布局 - 阴影按书写顺序从后往前绘制,想让某层更“靠前”,就把它写在后面
IE 和旧版 Safari 对 inset 支持不稳定
inset 在 IE10+ 和 Safari 6.1+ 才稳定支持,iOS 8 之前的 Safari 有渲染偏移问题,安卓 WebView 也有过阴影错位报告。
立即学习“前端免费学习笔记(深入)”;
- 若需兼容 IE9 或更老环境,
inset不可用,得用伪元素模拟(::before+ 绝对定位 + 负z-index) - 在 iOS 8–9 测试时,发现
inset阴影有时会轻微右偏 1px,加transform: translateZ(0)可触发硬件加速修复 - 别依赖
box-shadow: inset做关键视觉区分,比如表单必填标识——它可能在某些设备上根本看不见
inset 看似简单,但一动 padding、一换背景、一加 overflow,就容易悄无声息地消失。最稳妥的做法是:先关掉所有干扰样式,只留 box-shadow: inset 和 padding,确认能看见,再一点点加回来。










