content
好问题！这其实是**视觉设计里很微妙但关键的一个技巧** 👇
页面背景虽然是米白 `#fafaf9`，但卡片用的是**纯白 `#ffffff`**，它们之间其实有**肉眼可辨的色温差**。更重要的是，我还做了这**3层区分**让卡片不会"融进去"：
---
### 1️⃣ 阴影（最关键的"浮起感"）
卡片加了这层影子：
```css
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
```
还有深一点的：
```css
box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.15);
```
👉 **阴影 = 高度感**，让卡片看起来是"浮"在背景上而不是"贴"在上面。
### 2️⃣ 极浅的描边（1px 的"呼吸线"）
```css
border: 1px solid rgba(0, 0, 0, 0.03);
```
肉眼几乎看不到这条线，但它**刚好把卡片的边界定义出来**，让眼睛能区分卡片和背景的交界处。
### 3️⃣ 背景的质感差异
- 页面背景 `#fafaf9` — 偏暖、有点"纸感"
- 卡片 `#ffffff` — 纯白、更亮、更干净
**人眼对极细微的色差是敏感的**，这两个颜色并列时，纯白卡片会在米白底上"跳"出来。
---
🌰 举个反例你就懂了：如果把背景也设成 `#ffffff`，卡片也是 `#ffffff`，那才叫融为一体。而这里背景是**米白**，卡片是**纯白**，天然就有对比。