调好 box-shadow 的关键是让阴影自然融入环境：增大扩散半径（如卡片用 0 4px 12px）、降低透明度（浅色背景用 rgba(0,0,0,0.08)～0.12）、匹配背景色温（暖色界面略带棕调，深灰界面用蓝灰），并借助开发者工具实时调整以增强呼吸感。
阴影突兀，通常是因为扩散半径太小、透明度太高，或颜色和背景对比太强。调好 box-shadow 的关键不是“加阴影”，而是让阴影自然融入环境。
适当增大扩散半径（blur-radius）
扩散值太小（比如 2px）会让阴影边缘生硬，像贴了一圈黑边。适当增加能让阴影柔和过渡：
- 卡片类元素常用
0 4px 12px或0 6px 20px - 按钮悬浮可设为
0 2px 8px，轻量但有层次 - 避免用
0 0 0或0 1px 1px这类极细阴影，容易刺眼
降低透明度，用 rgba 控制灰度与不透明度
直接写 #000 或 black 阴影几乎总是太重。改用 rgba() 精确控制：
- 浅色背景上推荐
rgba(0, 0, 0, 0.08)～0.12 - 深色背景可用
rgba(255, 255, 255, 0.06)模拟环境光反射 - 别用
opacity调整体透明度——它会影响整个元素，不是只调阴影
匹配背景色温，避免冷灰/暖灰冲突
纯黑阴影在暖色背景（如米白、浅木纹）上会显得脏；纯白阴影在冷灰界面上则像反光过曝：
立即学习“前端免费学习笔记（深入）”；
- 暖色系界面：用
rgba(0, 0, 0, 0.06)或略带棕调的rgba(30, 30, 30, 0.08) - 深灰/蓝灰界面：可尝试
rgba(100, 100, 120, 0.1)，比纯黑更协调 - 用浏览器开发者工具实时拖动数值，观察和背景的融合感
基本上就这些。阴影不是“加效果”，而是模拟真实光照逻辑——离得近、看得清的阴影要淡而柔；离得远、被空气散射的才该虚化。调的时候少看参数，多看它在页面里“有没有呼吸感”。
