使用背景色的深浅变体，如浅灰背景用深灰加透明度；2. 同色系低饱和阴影保持色调统一，营造真实光照感；3. 暗色背景用浅色阴影模拟环境光；4. 通过透明度控制融合度，建议alpha值0.1～0.3，确保阴影自然融入设计。
box-shadow 的颜色搭配背景时，关键在于增强视觉层次又不破坏整体协调。选对颜色能让元素自然突出或产生特定氛围，比如柔和浮起或强烈聚焦。
1. 使用背景色的深浅变体
最稳妥的方式是让阴影颜色基于背景色做轻微加深或变透明处理。
- 如果背景是浅灰，可用深一点的灰色加透明度：box-shadow: 0 4px 8px rgba(150, 150, 150, 0.2);
- 白色卡片在浅色背景上，用带透明度的黑色或深灰更自然，避免纯黑生硬
2. 同色系低饱和阴影
若容器有色彩背景（如浅蓝），阴影可用同色系但更低亮度和透明度的颜色。
- 例如背景为 #e3f2fd，阴影可设为 rgba(25, 118, 210, 0.1)
- 这样既保持色调统一，又营造出“光从上方照下”的真实感
3. 暗色背景上的浅色阴影
在深色主题中，纯白或浅灰的阴影反而更合适。
立即学习“前端免费学习笔记（深入）”；
- 比如黑色背景上卡片，可用 box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
- 这种“反向投影”模拟环境光漫射，比深色影子更合理
4. 利用透明度控制融合度
无论什么颜色，调整 alpha 值 是关键。
- 一般建议透明度在 0.1～0.3 之间，太浓会突兀，太淡没效果
- 内阴影（inset）尤其要注意，稍重就会像脏污而不是立体感
基本上就这些。重点是让阴影服务于整体设计，不抢戏又能引导视觉。测试时多切换明暗模式看看兼容性，效果更稳。
