用 box-shadow 和 border-radius 搭配是实现现代卡片式布局最简洁高效的方式，需平衡阴影层次与圆角柔和度；推荐 border-radius 8–16px，box-shadow 单层用 0 2px 8px rgba(0,0,0,0.1)，多层可叠加微阴影与悬浮感阴影，悬停时配合 translateY(-2px) 和增强阴影，暗色模式下应调整阴影透明度与颜色。
用 box-shadow 和 border-radius 搭配，是实现现代卡片式布局最简洁、最高效的方式。关键在于控制阴影层次感与圆角柔和度的平衡，避免生硬或过度浮夸。
基础卡片结构：容器+圆角+阴影
一个标准卡片只需一个块级元素（如 div），通过两个 CSS 属性即可成型：
-
border-radius 控制四角弧度，推荐值在
8px到16px之间，太小像直角，太大易显臃肿； -
box-shadow 添加立体感，常用单层阴影如
0 2px 8px rgba(0,0,0,0.1)，数值含义依次为：水平偏移、垂直偏移、模糊半径、颜色； - 搭配
padding和background-color（建议用纯白或浅灰）保证内容可读性与视觉呼吸感。
增强真实感：多层阴影模拟自然光
单层阴影有时显得扁平，叠加两层可提升空间层次：
- 内层：短距离、低透明度，表现贴近表面的微阴影，例如
0 1px 3px rgba(0,0,0,0.08)； - 外层：稍远、略扩散，营造悬浮感，例如
0 4px 12px rgba(0,0,0,0.12)； - 写法上用逗号分隔，如：
box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.12);
交互反馈：悬停时强化卡片表现
用户悬停卡片时，轻微提升视觉权重能增强可点击感知：
立即学习“前端免费学习笔记（深入）”；
- 增加
transform: translateY(-2px)让卡片“微微上浮”； - 同步加强阴影（如增大模糊半径或透明度），例如
box-shadow: 0 4px 16px rgba(0,0,0,0.15)； - 加上
transition: all 0.2s ease保证动效顺滑，避免突兀。
适配暗色模式的小技巧
若页面支持深色主题，阴影颜色需动态调整：
- 避免固定写死
rgba(0,0,0,0.1)，改用color-mix()（新标准）或 CSS 自定义属性配合@media (prefers-color-scheme: dark)； - 更稳妥做法：深色背景下降低阴影透明度（如
0.05），并倾向使用偏蓝灰的暗影色（如rgba(255,255,255,0.06)）替代纯黑； - border-radius 值无需改动，但可微调 padding 或字体颜色以维持对比度。
