box-shadow inset 阴影失效主因是漏写 inset 关键字或位置错误；需写在偏移量前，不可加引号；表单控件需重置 appearance 和 outline 才生效。
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 样式覆盖——这两处一错，阴影就彻底看不见，连调试都找不到原因。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
