阴影突兀主因是模糊半径过小、扩散半径为负或颜色对比过强；应增大模糊值（如12px～24px）、微调偏移与扩散、降低透明度（如rgba(0,0,0,0.08)），并可用双层阴影增强真实感。
阴影太突兀，通常是因为 box-shadow 的模糊半径（blur radius）太小、扩散半径（spread radius）为负值，或颜色对比太强。调柔和的关键是增加模糊值、适当扩大扩散、降低透明度，并配合偏移控制层次感。
增大模糊半径（blur-radius）
模糊半径决定阴影边缘的软硬程度。值越小越锐利，越大越柔和。一般卡片推荐从 12px～24px 起步：
- ✅ 推荐写法：
box-shadow: 0 4px 16px rgba(0,0,0,0.1) - ❌ 避免写法：
box-shadow: 0 2px 2px rgba(0,0,0,0.3)（太硬、太重）
微调偏移与扩散，避免“浮空感”
纯垂直偏移（如 0 4px）容易让卡片像贴在背景上；加一点水平偏移+正向扩散，能模拟自然光投射：
- 用
0 4px 12px -2px：轻微内收，让阴影更贴合卡片底部 - 或
0 6px 20px 0px：稍大模糊 + 零扩散，更通透自然 - 避免
0 0 10px这类无偏移阴影——它会让卡片失去立体定位
降低颜色透明度，用对灰度
别用纯黑 rgba(0,0,0,0.3)，它在浅色背景下尤其刺眼。优先选带灰阶的低透色：
立即学习“前端免费学习笔记（深入）”；
- ✅ 推荐：
rgba(0, 0, 0, 0.08)或rgba(33, 33, 33, 0.12) - ? 小技巧：深色模式下可换为
rgba(255, 255, 255, 0.06)
叠加多层阴影增强真实感
单层阴影难模拟环境光。两层组合更细腻：
- 近层：小偏移 + 中等模糊 → 表现接触面细节
0 2px 6px rgba(0,0,0,0.06) - 远层：稍大偏移 + 更大模糊 → 表现整体氛围
0 8px 24px rgba(0,0,0,0.08) - 合起来：
box-shadow: 0 2px 6px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.08)
基本上就这些。不复杂但容易忽略——重点不是加阴影，而是让阴影「存在得合理」。
