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