box-shadow的四个参数依次为水平偏移、垂直偏移、模糊半径、扩散半径，方向由前两个值的正负及大小决定；blur-radius过大或overflow:hidden、transform等会干扰阴影显示效果。
box-shadow 的四个参数分别控制什么
阴影方向由前两个偏移值决定：box-shadow: h-offset v-offset blur-radius spread-radius color。其中 h-offset 控制左右偏移（正数向右，负数向左），v-offset 控制上下偏移（正数向下，负数向上）。这两个值直接决定阴影“投在哪儿”。
常见误区是以为只改颜色或模糊度就能调方向——其实方向完全由这俩数值符号和大小决定。
-
box-shadow: 4px 4px 8px rgba(0,0,0,0.2)→ 阴影在元素右下方 -
box-shadow: -6px -6px 12px rgba(0,0,0,0.15)→ 阴影在左上方（比如模拟顶部光源） -
box-shadow: 0 -8px 10px -4px rgba(0,0,0,0.2)→ 纯上阴影，且用spread-radius负值收紧边缘，避免虚化过宽
如何让阴影只出现在单侧（比如只有右边）
关键不是“隐藏其他边”，而是让阴影只在目标方向有足够偏移，同时控制模糊和扩散不让它“溢出”。例如只显右侧阴影，就让 h-offset 足够大、v-offset 接近 0，并压低 blur-radius 和用负 spread-radius 收束。
- 纯右阴影推荐写法：
box-shadow: 8px 0 6px -3px rgba(0,0,0,0.15) - 若
v-offset不为 0（如2px），阴影会轻微下偏，视觉上就“不纯右”了 - 模糊值
blur-radius超过偏移量时，阴影必然向四周晕染，方向感消失
为什么有时改了偏移值阴影却没动
最常见原因是父容器设置了 overflow: hidden，把超出部分裁掉了；或者元素本身有 transform（尤其是 scale 或 rotate），导致阴影渲染区域被重置或缩放。
立即学习“前端免费学习笔记（深入）”；
- 检查父级是否含
overflow: hidden—— 临时改成visible验证 - 带
transform的元素，阴影可能被限制在 transform 原点附近，此时加transform-style: preserve-3d有时能缓解，但更稳的解法是用伪元素单独画阴影 - 使用
inset关键字时，偏移值逻辑反转：正h-offset反而往左“内陷”，别套用外阴影直觉
多层 box-shadow 模拟真实光照方向
单一 box-shadow 很难表现复杂光效，比如顶部主光 + 右侧环境光。这时叠加两层不同偏移的阴影更可控。
- 顶部主光：
box-shadow: 0 -4px 8px -2px rgba(0,0,0,0.15) - 右侧辅光：
4px 0 6px -2px rgba(0,0,0,0.08) - 合起来写：
box-shadow: 0 -4px 8px -2px rgba(0,0,0,0.15), 4px 0 6px -2px rgba(0,0,0,0.08) - 注意顺序：前面的阴影层在下面，后面的盖在上面；所以主光通常放前面，辅光放后面
偏移值不是越大越好，超过元素尺寸一半后，阴影容易脱离视觉锚点，显得飘。实际项目里，h-offset 和 v-offset 多数控制在 ±2px 到 ±12px 之间比较自然。
