box-shadow四个值依次为水平偏移、垂直偏移、模糊半径和颜色；漏掉颜色或调换后两值位置会导致失效或异常；模糊半径不能为负；配合transform和多层阴影可提升真实感，但需注意Safari兼容性。
box-shadow 的四个数值分别控制什么
box-shadow 后面跟的四个值（比如 box-shadow: 2px 2px 8px rgba(0,0,0,0.1)）不是随便排的：第一个是水平偏移，第二个是垂直偏移，第三个是模糊半径，第四个是颜色。漏掉第四个会直接失效；把第三、四个位置调换（比如写成 8px #000）浏览器会当成“扩展半径+颜色”，阴影就变厚且边缘生硬。
- 水平偏移为正：阴影往右；为负则往左
- 垂直偏移为正：阴影往下；为负则往上（别记反，它和 CSS 坐标系一致）
- 模糊半径不能为负（IE 里甚至不支持负值，直接忽略整条声明）
- 颜色推荐用
rgba()，透明度控制得当才能做出“浮起感”，纯黑#000容易显得脏
卡片阴影看起来“假”？可能是没配对使用 transform
只靠 box-shadow 很难模拟真实卡片的立体感——人眼看到抬升的物体，通常伴随轻微缩放和视角变化。单纯加大模糊值或偏移量，只会让阴影糊成一团，或者像贴在墙上的一张纸。
- 加
transform: translateY(-2px)让卡片略往上浮，阴影自然就“落”在下方了 - 配合
transition: all 0.2s ease，鼠标悬停时再微调transform和box-shadow，才有真实反馈 - 避免同时用
transform: scale()和大阴影——缩放会放大阴影本身，导致边缘锯齿，尤其在低 DPR 屏幕上明显
多层阴影怎么写才不卡、不重叠错乱
想模拟环境光+主光源，得用逗号分隔多组 box-shadow 值，但顺序和参数稍有偏差，效果就全乱：
- 写法必须是
box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.08)，不能换行或加多余空格（虽然大多数浏览器容忍，但旧版 Safari 会截断） - 第一层阴影（近）用小偏移+小模糊，第二层（远）用大偏移+大模糊，且透明度更低，否则远层会盖住近层
- 别堆超过 3 层——每多一层都增加渲染压力，移动端滚动可能掉帧；Chrome DevTools 的 “Rendering” 面板里勾选“Paint flashing”，能直观看到重绘区域是否异常扩大
阴影在 Safari 里消失或发虚？检查这些兼容细节
Safari（尤其是 iOS 15 及更早）对 box-shadow 的解析比 Chrome 严格得多，常见失效不是代码写错，而是被其他样式悄悄干扰：
立即学习“前端免费学习笔记（深入）”；
- 父容器有
overflow: hidden，而阴影超出边界——Safari 会直接裁掉，Chrome 则可能保留（取决于是否触发层叠上下文） - 用了
backface-visibility: hidden或will-change: transform，某些 Safari 版本会禁用阴影渲染 - 颜色值写成
hsla()或十六进制带 alpha（如#0008），部分 Safari 不识别，必须用rgba() - 如果卡片本身有
border-radius，阴影默认也跟着圆角，但若设置了box-shadow的第四个参数（扩展半径），这个扩展值在 Safari 里可能被忽略或计算错误
复杂点在于：阴影不是独立图层，它依附于元素的几何形状和渲染上下文。改一个 z-index 或加个 filter: opacity(.99)，都可能让阴影突然出现或消失——调试时得盯着 computed styles 里 box-shadow 是否真的生效，而不是只看代码写了没。
