CSS盒子内阴影添加方法box-shadowinset教程

CSS内阴影（box-shadow inset）看似简单却极易失效：漏写inset关键字、位置错误（必须置于偏移量前且不可加引号）、表单控件被浏览器默认样式覆盖，或是子元素背景遮挡、圆角与模糊值不匹配等细节问题，都可能导致阴影“消失不见”；掌握inset的正确语法、层级特性、跨浏览器渲染差异及表单重置技巧，才能让内阴影稳定呈现凹陷、浮雕或沉浸式视觉效果。

box-shadow inset 写法不对，阴影出不来

直接写 box-shadow: 0 0 10px #000; 默认是外阴影，加 inset 才是内阴影。漏掉这个词，样式就完全失效。

• 必须把 inset 放在偏移量和模糊值之前，比如 box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
• inset 是关键字，不是参数，不能加引号，也不能写成 in-set 或 inner
• 如果同时需要内外阴影，可以写两条：先写 inset，再写无 inset 的，用逗号分隔

内阴影被内容或子元素盖住

内阴影绘制层级低于盒子的内容（文字、图片、子元素），如果子元素有背景色或设置了 z-index，就会挡住阴影。

• 确保父容器没设置 overflow: hidden，否则阴影可能被裁切
• 子元素不要设 background-color: white 盖掉底层阴影；如需遮挡，改用透明度更低的背景，比如 rgba(255,255,255,0.95)
• 不用依赖 z-index 挽救——inset 阴影本身不参与堆叠上下文排序，它始终在内容之下

inset 阴影在 border-radius 圆角处显示异常

当盒子有 border-radius 时，inset 阴影会严格贴合内边框弧度，但模糊半径大会导致边缘发虚甚至“溢出”圆角视觉范围。

• 模糊值（第三个参数）建议控制在 2px–8px，超过 12px 在小圆角上容易糊成一团
• 偏移量（前两个参数）为 0 0 最安全；若要模拟凹陷感，用 inset 0 2px 4px 比 inset 0 -2px 4px 更可控
• 注意：Firefox 对大模糊值 + 小圆角的渲染略保守，Chrome 更“外扩”，测试时别只看一个浏览器

input 或 textarea 里加 inset 阴影没反应

原生表单控件（尤其是 <input>）默认有 UA 样式，会覆盖自定义 box-shadow，尤其在 Chrome 中。

• 先重置默认样式：appearance: none; 或 -webkit-appearance: none;
• 确保没遗漏 outline: none;，否则聚焦时系统 outline 会干扰阴影效果
• textarea 需额外处理 resize 和 border：去掉边框后，阴影才真正成为唯一视觉边界
• 移动端 Safari 对 inset 支持没问题，但 iOS 15 前的版本对 textarea 的 box-shadow 渲染有延迟，可加 transform: translateZ(0) 强制硬件加速

实际用的时候，最常卡住的是 inset 关键字位置和表单控件的 UA 样式覆盖——这两处一错，阴影就彻底看不见，连调试都找不到原因。

今天关于《CSS盒子内阴影添加方法box-shadowinset教程》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！