玻璃拟态的克制使用

玻璃拟态（glassmorphism）在 2020-2022 年被滥用成 AI 风的代名词。问题不在于效果本身，在于哪里都糊一层。

反模式（一眼 AI）

每个卡片都 backdrop-filter: blur(20px)，没层次
玻璃 + 渐变 + 阴影 + 圆角 + 动效全开
玻璃卡上面再盖一层玻璃卡，叠到屏幕都看不清

守则

1. 玻璃只用在 1-2 个层级

第一屏 Hero（背景是图片，需要模糊化）
浮在主内容上的弹层（搜索框、播放器）

其他都是纯色。

2. 透明度要有目的

/* ❌ */
backdrop-filter: blur(20px);
background: rgba(255, 255, 255, 0.5);

/* ✅ */
backdrop-filter: blur(28px) saturate(150%);
background: rgba(255, 255, 255, 0.78);

后半段的 saturate(150%) 让背景颜色透过玻璃时更饱和——这是借景而不是"贴一层雾"。

3. 配 1px 内高光

box-shadow:
  0 22px 70px rgba(0, 0, 0, 0.1),
  inset 0 1px 0 rgba(255, 255, 255, 0.85);

这 1px 内高光（inset shadow）让玻璃卡"边缘"有反光——和真实玻璃的物理效果一致。

4. 性能意识

backdrop-filter 在4G 移动端很贵。一个页面最多 3-5 个元素用它，超了就降级为 background: rgba(255, 255, 255, 0.92) 的纯色。

玻璃拟态的克制使用（AI 味的反面）