box-shadow 的 inset 关键字需背景色、明确尺寸和 visible 溢出才能生效；常见失效因无背景、无高度或父容器 overflow: hidden；调参应选低透明度黑（0.04～0.08）、模糊值10～20px、偏移0 0，并配合 border-radius 和 padding 使用。
box-shadow 的 inset 关键字不能直接在空内容或纯文本容器上生效——必须有背景支撑、尺寸明确、且避免被裁剪，否则你调的阴影根本不会显示。
为什么给 <main></main> 加 inset 阴影总没反应？
常见错误是直接写：main { box-shadow: inset 0 0 12px rgba(0,0,0,0.06); }，但 <main></main> 默认没有 background、没有显式 height 或 min-height，也没有 overflow: visible 保障（某些重置样式会设 overflow: hidden）。结果就是：阴影计算了，但“投”在透明区域上，肉眼不可见。
- 必须设置非透明背景，哪怕只是
background: #fff或浅灰如#f8f9fa - 确保有高度支撑：用
min-height: 100vh或包裹内容后自然撑高 - 检查父容器是否设置了
overflow: hidden——它会把inset阴影整个吃掉 -
inset阴影依赖元素自身“实体感”，纯文字流内容不构成渲染边界，需靠背景色锚定
inset 参数怎么调才显精致不发灰？
内阴影不是越深越好。真正干净的内阴影靠“弱对比+软过渡”，不是靠加大透明度或模糊值硬堆。
- 颜色用极低透明度黑：
rgba(0,0,0,0.04)～rgba(0,0,0,0.08)，比0.15更耐看 - 模糊值控制在
10px～20px：25px开始边缘发虚，30px+就像蒙了一层雾 - 偏移量保持
0 0：任何x或y偏移都会让阴影“浮起来”，失去内嵌感 - 搭配
border-radius使用：圆角会让阴影自动贴合，视觉立刻更柔和
怎样避免 inset 阴影吃掉内边距或文字？
很多人加完 inset 发现文字紧贴边缘、内边距失效——这是因为 box-shadow 属于盒模型的“绘制层”，不占布局空间，但视觉上会压盖内容。
- 给
main加padding（比如padding: 2rem），别指望阴影自动留白 - 如果用了
background-clip: padding-box（少见但存在），inset阴影会从内边距边缘开始画，导致文字被盖；改用默认的border-box即可 - 不要对
main设overflow: hidden——它不仅裁剪溢出内容，还会截断inset阴影的渲染区域 - 若内容区有卡片/区块，它们自身的
box-shadow可能和main的inset冲突，建议统一用外阴影或分层处理
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
