什么是玻璃拟态#

玻璃拟态是近年来最流行的界面风格之一：通过半透明背景 + 背景模糊 + 细边框 + 顶部高光，让元素看起来像一块磨砂玻璃，营造轻盈、通透、高级的质感。

核心四要素#

• 背景模糊（backdrop-filter）：backdrop-filter: blur(20px)，这是玻璃感的灵魂
• 半透明底色：如 rgba(255, 255, 255, 0.06)，透明度决定”玻璃”的厚薄
• 细边框：1px solid rgba(255, 255, 255, 0.08)，给玻璃一个”边缘”
• 顶部光条：用渐变模拟玻璃对光线的折射，是质感的关键细节

落地代码示例#

1
.glass-card {
2
  background: rgba(255, 255, 255, 0.06);
3
  backdrop-filter: blur(20px);
4
  border: 1px solid rgba(255, 255, 255, 0.1);
5
  border-radius: 16px;
6
}
7
.glass-card::before {
8
  content: "";
9
  position: absolute;
10
  top: 0; left: 0; right: 0;
11
  height: 1px;
12
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
13
}

避坑指南#

1. 别过度使用：全屏玻璃会让层级混乱，重点元素用玻璃、普通内容保持低调
2. 保证对比度：背景模糊再漂亮，文字看不清就是失败，深色底配浅字是安全组合
3. 性能注意：backdrop-filter 有渲染成本，避免在大量滚动元素上滥用

小结#

玻璃拟态的美感来自”克制”：模糊、透明度、光条都做到刚刚好，页面就会轻盈又有高级感。本站的卡片设计正是这一思路的实践。