玻璃拟态卡片

这是在现代网页设计中非常受欢迎的“玻璃拟态（Frosted Glass）”效果的卡片组件。通过组合背景模糊（backdrop-filter）、半透明的背景色以及微弱的边框，实现了具有洗练深度感的UI。

Glassmorphism

这是玻璃拟态的演示。背景美丽地透出来，带来内容仿佛悬浮在空间中的令人印象深刻的视觉效果。

代码

请复制以下代码并将其集成到您的项目中。

<div class="glass-container">
  <div class="glass-card">
    <h3 class="glass-title">Glassmorphism</h3>
    <p class="glass-text">
      这是玻璃拟态的演示。背景美丽地透出来，带来内容仿佛悬浮在空间中的令人印象深刻的视觉效果。
    </p>
  </div>
</div>

/* 背景（演示用） */
.glass-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 2rem;
}

/* 玻璃拟态卡片主体 */
.glass-card {
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 2.5rem;
  max-width: 360px;
}

.glass-title {
  margin: 0 0 1rem 0;
  font-size: 1.75rem;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.glass-text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}

特征

美丽的透明与模糊: 使用 backdrop-filter: blur() 表现出类似毛玻璃的质感。
立体感的展现: 通过组合半透明的边框和投影，产生仿佛从背景中浮现出来的效果。
高通用性: 即使背景是渐变或图片，也能自动呈现出协调、美观的外观。