inset必须紧接box-shadow属性名后、偏移值前书写，不可省略或错序；正确写法为box-shadow: inset 0 2px 4px rgba(0,0,0,0.2)；漏写、位置错误或元素无背景色均导致内阴影不可见。
box-shadow 的 inset 参数怎么加才生效
直接在 box-shadow 值的最前面加 inset 关键字，它不是可选配置项，而是决定阴影绘制位置的必需修饰符。漏掉或写错位置（比如放在颜色后面）都会导致浏览器忽略整个声明。
正确写法是：box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);。注意顺序不能颠倒——inset 必须紧接在属性名后、偏移和模糊值之前。
-
inset和后续数值之间要有空格，但不能有逗号 - 多个阴影用逗号分隔，每个阴影都得单独写
inset（inset 0 1px #000, 0 2px #333是错的；应写成inset 0 1px #000, 0 2px #333→ 后者无inset，就变成外阴影了） - 如果同时需要内外阴影，必须显式写出两组：一组带
inset，一组不带
为什么加了 inset 还看不到内阴影
最常见原因是元素没有「可绘制的背景」或「足够对比度」。内阴影是叠加在元素背景之上的，如果背景是透明的、或跟阴影颜色太接近，就等于白忙一场。
- 确保元素有明确背景色，比如
background-color: #fff;或至少background-color: rgba(255,255,255,0.9); - 检查父容器是否设置了
overflow: hidden，这会裁掉内阴影超出 padding 区域的部分（内阴影默认从 border box 内侧开始绘制） - 阴影的
blur值太小（如0）或spread为负且过大，也可能让阴影缩进到看不见的位置
inset 阴影和 border-radius 搭配要注意什么
圆角会直接影响内阴影的形状——它会严格贴合 border-radius 裁剪，而不是像外阴影那样自然发散。这意味着：圆角越大，内阴影越“收窄”，甚至在小尺寸元素上完全消失。
立即学习“前端免费学习笔记（深入）”；
- 如果元素
border-radius: 8px，但box-shadow: inset 0 0 10px #000，阴影可能只在四个角附近残留一点灰边 - 想让内阴影更明显，可以适当增大
blur值（如16px），或配合正的spread值（如inset 0 0 12px 2px #000）把阴影往外“撑”一点 - 不要依赖
inset模拟「凹陷按钮」效果时忽略文字颜色——深色内阴影配深色文字会不可读
性能与兼容性那些事
inset 是 CSS3 标准特性，现代浏览器（Chrome 10+、Firefox 4+、Safari 5.1+、Edge 12+）都支持，IE9 及以下不支持，且无降级方案——它不会回退成外阴影，而是整条声明被丢弃。
- 大量使用高模糊值的
inset阴影（尤其在滚动容器里）可能触发重绘开销，iOS Safari 上偶有闪烁 - 避免在
:hover中突然开启大范围inset阴影，建议用transition缓动，且只过渡box-shadow属性本身（transition: box-shadow 0.2s;） - 如果要兼容老 IE，只能用图片或伪元素模拟，
inset无法 polyfill
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2); background: white;，再逐步调参数。很多人卡在第一步——连基础效果都没出来，就急着调细节。 
