box-shadow inset 不增加元素尺寸，因其不参与盒模型计算，仅在绘制阶段叠加；参数顺序为 inset h-offset v-offset blur-radius spread-radius color；大模糊或扩张值可能被 overflow: hidden 裁剪；多层 inset 需亮暗边配合模拟立体凹陷。
box-shadow inset 为什么不会增加元素尺寸
因为 box-shadow（包括 inset）本身不参与盒模型计算——它只是渲染层的“贴图”，不影响 width、height、padding、border 或 margin。浏览器在布局阶段完全忽略阴影，只在绘制阶段叠加。这点和 outline 类似，但和 border 有本质区别。
常见误解是以为 inset 阴影会“向内挤压”内容，其实它只是从 border 内边缘往里画一层遮罩，内容区域（content box）和内边距（padding）完全不受影响。
inset 投影的参数顺序和关键取值
box-shadow: inset h-offset v-offset blur-radius spread-radius color; —— 注意 inset 必须写在最前面，否则整个声明会被浏览器忽略。
-
h-offset和v-offset：决定阴影起点位置。负值向左/上偏移，正值向右/下；对inset来说，它们控制的是“被遮挡区域”的方向，比如inset -2px 0 4px #000会在左侧形成一道暗边 -
blur-radius：必须为非负值，0 表示硬边，越大越柔和 -
spread-radius：可正可负。正值让阴影向内扩张（更厚），负值收缩（更窄），常用来模拟“凹陷”或“压痕”效果
示例：box-shadow: inset 0 2px 4px -1px rgba(0,0,0,0.2); —— 模拟按钮被按下的内凹感，负 spread-radius 避免阴影溢出 padding 区域。
inset 阴影和 overflow 的冲突问题
当父容器设置了 overflow: hidden，而子元素用了大范围 inset 阴影（比如大 blur-radius + 正 spread-radius），阴影可能被意外裁剪——因为 inset 阴影的绘制区域仍以 border box 为基准，模糊扩散部分会超出该区域。
- 解决方法一：给父容器加
padding留出模糊余量（如padding: 8px），比改overflow更安全 - 解决方法二：限制
blur-radius和spread-radius总和 ≤ 父容器内边距，例如父元素padding: 4px，则建议blur-radius + abs(spread-radius) ≤ 4 - 不要依赖
overflow: visible，它可能破坏整体布局流
多层 inset 阴影实现真实凹陷效果
单层 inset 很难模拟物理按压的立体感，通常需要两层配合：一层浅色亮边（模拟高光），一层深色暗边（模拟阴影）。顺序很重要——CSS 中后写的阴影在上层。
示例：box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -2px 4px rgba(0,0,0,0.15);
注意点：
- 亮边放前面，用小
v-offset正值 + 极小模糊，模拟顶部受光 - 暗边放后面，用负
v-offset+ 稍大模糊，模拟底部收光 - 避免同时使用过大
spread-radius，否则两层会互相覆盖失真 - 在 Retina 屏上，
1px偏移可能不够，可尝试0.5px（现代浏览器支持）
真正难的不是写法，而是根据背景色动态调整 rgba 透明度和偏移量——同一组值换到深色背景上可能直接看不见。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
