box-shadow的四个长度值分别控制水平偏移、垂直偏移、模糊半径和扩散半径：offset-x决定阴影左右位移，正值向右；offset-y控制上下位移，正值向下；blur-radius影响边缘柔和度，值越大越模糊；spread-radius调节阴影尺寸，正值扩大、负值收缩。
box-shadow 的四个长度值分别控制什么
很多人把 box-shadow 当成“加个阴影”就完事，结果阴影又重又假，像贴了张黑纸。关键在四个长度参数：offset-x、offset-y、blur-radius、spread-radius。它们不是随便调的数字，而是模拟真实光源投射的物理逻辑。
典型自然阴影需要：水平偏移小（2px 以内）、垂直偏移略大（4px 模拟重力下坠）、模糊半径适中（8px～12px）、扩散半径为负或零（避免阴影膨胀失真）。
-
offset-x和offset-y越小，阴影越贴近卡片底部，越“轻”；设成0会变成居中浮空效果，不自然 -
blur-radius决定边缘柔和度；超过20px容易发虚、失去立体感；小于4px则像硬边投影，像印刷品 -
spread-radius为正会让阴影整体放大，常用于强调边框；自然卡片阴影建议用0或轻微负值（如-1px）收束边缘
颜色必须用 rgba()，不能只写 #000
纯黑阴影（#000 或 black）在任何背景上都显得突兀、非真实。真实阴影是环境光被遮挡后的衰减，带透明度和色相偏移。
推荐用 rgba(0, 0, 0, 0.1)～rgba(0, 0, 0, 0.15) 起手，深色背景可微调为 rgba(0, 0, 0, 0.2)；更进阶的做法是略带灰褐（如 rgba(30, 30, 30, 0.12)），避开纯灰，减少数码感。
立即学习“前端免费学习笔记（深入）”；
- 避免使用
hsl()或命名色（如gray），兼容性差且不易控透明度 - 不要省略 alpha 通道——
rgba(0,0,0,.1)可以，但rgb(0,0,0)不行 - 同一项目里，不同层级卡片（如弹窗 vs 普通卡片）应保持 alpha 差异，体现 Z 轴层次
多层 box-shadow 比单层更真实
真实物体受多个光源影响，单层 box-shadow 只能模拟主光源。叠加两层——一层近距模糊（表现本体投影），一层远距极淡（表现环境漫反射）——能立刻提升可信度。
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08), /* 主阴影：清晰底部 */ 0 8px 24px rgba(0, 0, 0, 0.06); /* 辅助阴影：更远更淡 */
- 第二层的
blur-radius至少是第一层的 2 倍，alpha降低 20%～30% - 两层
offset-y应不同（如4px和8px），制造深度错觉 - 不要叠加三层以上——浏览器渲染开销上升，且人眼已难分辨，反而显得脏
响应式卡片阴影容易忽略的细节
在移动端，过重的阴影会干扰触摸目标识别，也增加渲染压力。不是简单用 @media 减 alpha 就完事，要结合设备特性调整。
- 触屏设备上，优先降低
blur-radius（如从12px改为6px），比调 alpha 更有效减少视觉重量 - 使用
prefers-reduced-motion时，应直接移除box-shadow或降为0 1px 2px rgba(0,0,0,0.05)，避免动画+阴影双重消耗 - 某些安卓 WebView 对负
spread-radius渲染异常，测试时务必真机检查，必要时用0替代负值
真正自然的阴影，是让人注意不到它存在；一旦你得盯着调参，说明光、材质、Z 轴关系还没理清——参数只是表象，物理直觉才是底层依据。
