阴影自然的关键是调低模糊半径、减小偏移量、用低透明度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 - 慎用于文字或小图标，易造成视觉干扰
