实现方法

核心 CSS 属性

实现玻璃拟态的关键属性是 backdrop-filter。

.glass-card {
  /* 半透明背景 */
  background: rgba(255, 255, 255, 0.2);

  /* 核心：背景模糊 */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  /* 边缘高光 */
  border: 1px solid rgba(255, 255, 255, 0.3);

  /* 阴影增加深度 */
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);

  /* 圆角 */
  border-radius: 10px;
}

浏览器兼容性

虽然现代浏览器大多支持 backdrop-filter，但为了兼容性，建议提供回退方案（Fallback）。

@supports not (backdrop-filter: blur(10px)) {
  .glass-card {
    background: rgba(255, 255, 255, 0.9);
  }
}