box-shadow: inset 要生效需满足三要素：明确宽高、显式 background-color（如 transparent）、父容器无 overflow: hidden；其层级在 background-color 上、background-image 下，且跨浏览器渲染存在差异。
box-shadow: inset 怎么写才真正生效
不加 border 或 background 的纯空 div，box-shadow: inset 是看不见的——它只作用于元素的“内容区+内边距区”，但若元素没尺寸、没背景、没边框，阴影就无处附着。
- 必须确保元素有明确宽高（
width/height或由内容撑开） - 至少要有
background-color: transparent（显式声明，别依赖默认） - 避免父容器
overflow: hidden裁掉内阴影边缘（尤其用大blur时） - 注意：
inset阴影不会触发硬件加速，但大量使用仍可能影响滚动性能
模拟内凹按钮和输入框聚焦态
比起改 border 或贴图，box-shadow: inset 是更轻量、更易配色的内凹方案，尤其适合 dark mode 切换场景。
- 按钮按下态：
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2)（配合transform: translateY(1px)更真实） - 输入框聚焦内光晕：
box-shadow: inset 0 0 0 2px #007aff（比outline更可控，不破坏布局） - 禁用状态慎用：
inset阴影在低对比度下易丢失，建议叠加opacity或灰阶filter
和 background-image 混用时的层级陷阱
box-shadow: inset 渲染层级在 background-color 之上、background-image 之下——这意味着它会被图片盖住，但能压住纯色背景。
- 想让内阴影“透出”图片纹理？得用
background-blend-mode或把阴影转成background-image: radial-gradient() - 多层背景时，
inset阴影只对最底层背景生效，上层图片不受影响 - 调试技巧：临时加
background-color: hsl(0,0%,95%)看阴影是否绘制成功，再换回原背景
Firefox 和 Safari 对 inset 阴影的渲染差异
Firefox 会严格按规范裁剪 inset 阴影到 border box 内；Safari（尤其旧版）有时会把模糊边缘“溢出”到 padding 外，导致视觉变厚。
立即学习“前端免费学习笔记（深入）”；
- 跨浏览器一致的关键：控制
blur值别超过padding的 1.5 倍 - Safari 15.4+ 修复了
inset在transform元素上的偏移 bug，但 iOS 15.3 及更早仍存在 - 不要依赖
inset做精确像素级 UI 对齐，它本身不是 layout 工具
真正难的是让 inset 阴影在不同缩放、不同 contrast 设置、不同暗色模式适配下依然可辨——它看着简单，实则每调一个参数都在和渲染引擎博弈。
