什么是玻璃拟态

玻璃拟态通过半透明背景、背景模糊与细边框高光，让界面层叠更有空间感。

CSS 关键属性

1
2
3
4
5
6
.glass-card {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

使用注意

  • 背景需要有一定纹理或渐变，模糊效果才明显
  • 注意对比度，保证文字可读性
  • 移动端注意 backdrop-filter 性能

应用场景

仪表盘卡片、导航栏、模态层、作品集展示块都很适合这种风格。