推荐使用 0 2px 8px rgba(0,0,0,0.08)，y-offset 小保证浮起感，blur-radius 控制在 4–12px 避免发虚；禁用 spread-radius 防边缘生硬；border-radius 与 padding 需协调，如 12px 圆角配 16px 内边距；避免 border 与 box-shadow 共存导致双线化；深色模式下需提高阴影透明度至 rgba(0,0,0,0.24)。

box-shadow 的偏移与模糊值怎么配才不显脏

阴影太重会压住内容，太轻又没立体感。关键在 y-offset（垂直偏移）和 blur-radius 的比例：推荐用 0 2px 8px rgba(0,0,0,0.08) —— y-offset 小（2px）保证轻微“浮起”感，blur-radius 控制在 4–12px 之间，超出容易发虚。避免用 spread-radius（第四个参数），它会让阴影边缘生硬，尤其在浅色背景上显得灰蒙蒙。

border-radius 和 padding 要同步考虑

圆角不是越大越好。当 border-radius 设为 12px 时，padding 至少得是 16px，否则文字或图标会紧贴圆角内缘，视觉拥挤。更稳妥的做法是用 CSS 自定义属性统一控制：

:root { --card-radius: 12px; --card-padding: 16px; }

然后在卡片里写 border-radius: var(--card-radius); padding: var(--card-padding);。这样改一处，所有卡片响应一致。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

为什么别用 border 配合 box-shadow

同时加 border 和 box-shadow 容易让卡片边缘“双线化”，尤其在高缩放或 Retina 屏下明显。真实项目中应二选一：

• 要清晰边界 → 去掉 box-shadow，用 border: 1px solid #e0e0e0 + border-radius
• 要柔和悬浮感 → 去掉 border，只靠 box-shadow 模拟深度

若真需两者共存（比如强调分割线），至少把 border 设为 transparent 或匹配背景色，仅作结构占位。

深色模式下 box-shadow 的透明度必须重设

同一组 rgba(0,0,0,0.08) 在深色背景上几乎不可见，反而可能透出底层暗色造成灰雾感。必须配合媒体查询调整：

@media (prefers-color-scheme: dark) { .card { box-shadow: 0 2px 8px rgba(0,0,0,0.24); } }

注意不是简单调高透明度，而是提高整个 alpha 值——因为深色背景下人眼对低对比阴影更不敏感。这点常被忽略，直到 QA 提交截图才发现卡片“消失”了。