推荐使用 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);。这样改一处，所有卡片响应一致。
为什么别用 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 提交截图才发现卡片“消失”了。 
