box-shadow四个值依次为水平偏移、垂直偏移、模糊半径、扩散半径；水平正数向右、垂直正数向下，模糊半径非负，扩散半径可正负影响阴影范围大小。
box-shadow 的四个数值分别控制什么
很多人以为 box-shadow 前两个值只是“水平+垂直偏移”，其实第1个是水平偏移（正数向右），第2个是垂直偏移（正数向下），第3个是模糊半径（不能为负），第4个是扩散半径（可正可负，正数扩大阴影范围，负数收缩）。顺序错了，阴影就飞了。
常见错误现象：box-shadow: 0 0 10px #000; 看起来正常，但一旦加了第四个值比如 box-shadow: 0 0 10px 5px #000;，发现阴影突然变大一圈——这就是扩散半径在起作用，不是“额外偏移”。
- 水平偏移为
5px：阴影整体向右挪 5px - 垂直偏移为
-8px：阴影整体向上挪 8px（注意负号） - 模糊半径设为
0：边缘锐利，无渐变过渡 - 扩散半径为
-2px：阴影比元素本身还小一圈，适合做内收式浮层效果
想让阴影只出现在盒子某一边，怎么配参数
纯靠 box-shadow 模拟单边阴影，本质是用“偏移 + 负扩散 + 小模糊”把其他三边裁掉。例如只留底部阴影：box-shadow: 0 4px 6px -2px rgba(0,0,0,0.1);。关键在 -2px 把左右和顶部的阴影压出可视区。
使用场景：卡片悬停、模态框底部微抬升、输入框聚焦提示。别用 blur 太大（比如 >12px），否则负扩散压不住，两侧还是会漏。
- 只显右边：用
4px 0 6px -2px，水平正偏移，垂直为 0 - 只显左边：用
-4px 0 6px -2px，水平负偏移 - 上下都不要？那就必须配合
overflow: hidden或伪元素遮罩，box-shadow本身做不到真正“单侧裁剪”
box-shadow 偏移失效或位置诡异的常见原因
最常踩的坑不是写错数值，而是父容器或自身样式干扰了渲染定位。比如设置了 transform: scale(0.95)，阴影会按缩放后尺寸计算偏移，视觉上就“不准”了；又或者父元素有 overflow: hidden，直接把偏移出去的阴影裁掉了。
另一个隐蔽问题是：元素有 border-radius 且阴影模糊值较大时，阴影边缘会沿着圆角弧线扩散，看起来像偏移歪了——其实没歪，是模糊采样路径变了。
- 检查是否意外加了
transform（尤其是scale或translate） - 确认父级没有
overflow: hidden或clip-path - 如果用了
border-radius，把blur调小到4px以内，观察是否“回归正常” - 阴影层级被其他元素盖住？加
z-index不起作用——box-shadow不参与 stacking context，得调父容器的层叠上下文
兼容性与性能提醒：别在大量元素上滥用大模糊阴影
box-shadow 在 Chrome/Firefox/Edge 中表现一致，但 Safari 对负扩散半径的支持略保守（尤其旧版本），box-shadow: 0 0 0 -1px #ccc 这种“内描边”写法在 Safari 14 以下可能不显示。
性能方面，模糊半径每增加 1px，浏览器要多算约 4 倍像素采样。一个列表项用 0 8px 24px 0 rgba(0,0,0,0.15) 没问题，但 100 个同款卡片同时 hover，滚动就会卡顿——特别是移动端。
- PC 端可接受模糊值 ≤12px，移动端建议 ≤6px
- 避免在
:hover动画里动态改blur或spread，用transform移动更省资源 - 需要精确控制阴影形状？不如用
filter: drop-shadow()，它不依赖元素盒模型，但也不支持扩散半径
偏移坐标的本质是相对元素盒模型原点的位移，而这个“原点”会被各种样式悄悄改写。调阴影前，先看一眼 computed styles 里的 transform、border-box 和父级 overflow——大部分“位置不对”问题，根子不在 box-shadow 本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
