内阴影需多层偏移、颜色与透明度组合才显深度，单用inset 0 0 10px #000仅得灰斑；正确语法为inset紧接box-shadow:后，颜色不可省略，三层阴影可模拟真实凹陷效果。
内阴影本身不产生深度，深度感来自多层偏移+颜色+透明度的组合，单写 box-shadow: inset 0 0 10px #000 只会得到一块糊成一团的灰斑。
为什么 inset 阴影看起来“平”甚至“消失”
根本原因不是语法错，而是人眼识别深度依赖明暗对比方向。全零偏移（inset 0 0）让阴影均匀覆盖整个内边，失去光照逻辑；纯黑或高 alpha 值又会让它像蒙版而非凹陷。
- 浏览器默认用元素
color值当阴影色，没设color就可能出意外黑块 - 父容器
overflow: hidden会直接裁掉内阴影——它虽在内部，但仍受盒模型裁剪约束 - 子元素带
background-color: white会盖住底层阴影，换成rgba(255,255,255,0.95)才留出透光余量
box-shadow: inset 的参数顺序和颜色位置不能错
inset 是关键字，必须紧挨在 box-shadow: 后面，不能放最后，也不能加引号。颜色值必须显式写出，且放在 inset 之后、所有偏移/模糊参数之后。
- ✅ 正确：
box-shadow: inset 0 2px 4px rgba(0,0,0,0.15) - ❌ 错误：
box-shadow: 0 2px 4px inset rgba(0,0,0,0.15)（inset位置错） - ❌ 错误：
box-shadow: inset 0 2px 4px（缺颜色，结果不可控） - ⚠️ 注意：同时要内外阴影时，
inset必须写在前面，用逗号分隔：box-shadow: inset 0 2px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.08)
模拟真实内凹深度的三层阴影写法
真正有立体感的“按下去”效果，靠一层阴影不够。得用上中下三段逻辑：顶部压暗、中部过渡、底部提亮（反光）。每层偏移和颜色都不同。
- 第一层（顶部暗边）：
inset 0 -2px 4px rgba(0,0,0,0.15)→ 模拟上方遮挡产生的阴影 - 第二层（主体凹陷）：
inset 0 0 6px rgba(0,0,0,0.08)→ 控制整体沉降感，模糊略大但 alpha 更低 - 第三层（底部反光）：
inset 0 2px 4px rgba(255,255,255,0.1)→ 浅色+正向偏移，制造受光错觉 - 合并写法：
box-shadow: inset 0 -2px 4px rgba(0,0,0,0.15), inset 0 0 6px rgba(0,0,0,0.08), inset 0 2px 4px rgba(255,255,255,0.1)
表单控件里 inset 阴影不显示？先干掉 UA 样式
和 在 Chrome/Firefox 里自带 UA 样式，会无视你的 box-shadow。这不是 bug，是设计使然。
- 必须加：
appearance: none或-webkit-appearance: none - 顺手清掉默认
outline：outline: none，否则聚焦时系统 outline 会抢戏 -
还要处理resize和border：border: none; resize: none;，否则阴影被边框挡住 - iOS Safari 旧版本（iOS 15 前）对
textarea的box-shadow渲染有延迟，可加transform: translateZ(0)强制硬件加速
最容易被忽略的是：inset 阴影的视觉权重极度依赖背景色。白底配深灰阴影可以，深灰底再用同样深灰阴影就彻底看不见——别指望自动适配，得配合 @media (prefers-color-scheme: dark) 手动换色值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
