box-shadow 不会撑开容器因其仅属绘制层视觉效果，不参与盒模型计算，不影响宽高与布局流；多层阴影用逗号分隔，后写者在上；高DPR下模糊变粗是抗锯齿所致；drop-shadow基于Alpha通道，适配形状而box-shadow基于矩形盒模型。
box-shadow 为什么不会撑开容器
因为 box-shadow 是绘制在元素「绘制层」上的视觉效果，不参与盒模型计算——它既不增加 width/height，也不影响 margin、padding 或父容器的布局流。
常见错误现象：给一个 width: 200px 的按钮加了大阴影后，发现旁边元素没被挤开，误以为“阴影没生效”；其实是它真·不占空间，连 overflow: hidden 都裁不掉（除非父容器设了 overflow: hidden 且阴影超出）。
- 阴影始终在元素 border box 外侧渲染，但属于「绘制阶段」产物，不是 layout 阶段的尺寸
- 即使
box-shadow: 0 0 30px rgba(0,0,0,0.5)，元素的getBoundingClientRect()返回的宽高依然不含阴影 - 若需让阴影“参与布局”，只能手动用
padding或伪元素模拟，但那就不是box-shadow了
多层阴影怎么写才不覆盖、不混乱
box-shadow 支持逗号分隔的多值写法，每层独立解析，顺序为「从后往前叠放」（类似 CSS 层叠上下文，最后写的在最上层）。
使用场景：按钮悬停时同时有内凹感 + 外扩散光晕，或卡片需要底部投影 + 右侧微偏移强调深度。
- 语法格式：
box-shadow: x1 y1 blur1 spread1 color1, x2 y2 blur2 spread2 color2 - 注意
spread值为负数会收缩阴影范围，正数才扩张；blur为 0 时是硬边阴影 - 容易踩的坑：漏掉逗号导致整条声明失效；颜色写成
transparent看不见，但依然占渲染开销
button:hover {
box-shadow: 0 2px 4px -1px rgba(0,0,0,0.1), /* 底部近阴影 */
0 8px 16px -4px rgba(0,0,0,0.1); /* 底部远阴影，更虚更淡 */
}
阴影在不同设备/缩放下模糊变粗怎么办
本质是像素对齐问题：box-shadow 的 blur 和 spread 值是 CSS 像素单位，在高 DPR 设备（如 Retina 屏）或浏览器缩放（125%）下，浏览器会插值渲染，导致边缘发虚甚至“变粗”。
这不是 bug，是抗锯齿行为。但对 UI 一致性影响明显，尤其卡片类组件。
- 避免用过小的
blur值（如0.5px），优先用整数（2px、4px） - 慎用
spread负值做“紧贴边框”的阴影，缩放后易出现断层或色块 - 如果必须精细控制，可用
transform: translateZ(0)强制 GPU 加速，部分缓解模糊（但非万能）
box-shadow 和 filter: drop-shadow 的核心区别
box-shadow 基于元素的矩形盒模型投射，而 filter: drop-shadow() 基于元素实际 Alpha 通道（即内容形状），能跟随圆角、透明区域、SVG 路径走。
使用场景：头像带 border-radius: 50% 且背景透明，用 box-shadow 会投出方形影子；此时必须换 drop-shadow。
-
box-shadow性能更好，尤其大量列表项；drop-shadow触发全量 Alpha 采样，重绘开销大 -
drop-shadow(x y blur color)参数顺序和box-shadow类似，但没有spread和inset - 兼容性：
drop-shadow在 IE 完全不支持，box-shadowIE9+ 支持（无inset）
真正复杂的地方在于：你得先判断这个阴影该“贴着形状走”还是“按盒子走”。很多设计师稿里画的是形状阴影，前端却惯性写 box-shadow，结果上线才发现圆角头像影子是方的——这时候改的不是代码，是协作预期。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
