阴影自然的关键是调低模糊半径、减小偏移量、用低透明度rgba色值匹配背景；推荐卡片用0 4px 12px rgba(0,0,0,0.1)，浅色背景配0.05–0.12透明度与8–16px模糊，深色背景改用浅色阴影。

阴影太突兀，通常是因为模糊半径太小、颜色对比太强，或偏移量过大。关键不是去掉阴影，而是让阴影更自然、更融入背景。

降低模糊值，增加柔和感

模糊半径（第二个参数）决定阴影边缘的软硬程度。值越小（比如 2px），阴影越锐利、越“跳”；适当增大（如 8px–16px）能让阴影过渡更平滑。

• 卡片类元素常用 box-shadow: 0 4px 12px rgba(0,0,0,0.1)
• 若背景是浅色，rgba(0,0,0,0.05) 配合 16px 模糊会更轻盈
• 避免用整数不透明度（如 0.3），小数值（0.08–0.12）更耐看

控制偏移量，避免“悬浮感过重”

垂直偏移（第二个参数）太大（如 10px）会让元素像被吊起来一样失真。真实光源下，近距投影偏移通常很微弱。

• 多数 UI 场景推荐 0 2px 或 0 3px 垂直偏移
• 需要层次感时，可叠加多层阴影：0 1px 2px rgba(0,0,0,0.05), 0 2px 6px rgba(0,0,0,0.08)
• 水平偏移慎用，除非刻意营造斜射光效果

匹配背景调性，调整颜色与透明度

纯黑阴影（rgb(0,0,0)）在浅灰/米白背景上极易刺眼。应根据背景明暗微调阴影色相与透明度。

• 浅色背景 → 用带灰度的黑：例如 rgba(30,30,30,0.08)
• 深色背景 → 改用浅色阴影：rgba(255,255,255,0.06)，方向可设为 0 -2px 模拟顶光
• 避免直接用 #000 或 black，始终用 rgba 控制透出感

用 inset 阴影补充内凹细节（可选）

当外阴影仍显生硬，可在元素内部加一道极细的内阴影，模拟边缘受光差异，增强真实感。

• 例如按钮： box-shadow: 0 2px 6px rgba(0,0,0,0.08), inset 0 1px rgba(255,255,255,0.2)
• 内阴影值务必轻微，模糊为 0 或 1px，透明度低于 0.2
• 慎用于文字或小图标，易造成视觉干扰