如何使用CSS box-shadow的inset参数给容器添加内阴影？

本文共计762个文字，预计阅读时间需要4分钟。

最常见的的问题是漏掉``标签，关键字，或者将其放置在错误的位置。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，混用内外会导致部分失效。