CSS 现代设计系统：玻璃态（Glassmorphism）设计实战教程

什么是 Glassmorphism？

Glassmorphism（玻璃态）是一种流行的 UI 设计风格，通过半透明背景、模糊效果和细腻边框来模拟磨砂玻璃的视觉效果。它始于 Apple macOS Big Sur 的设计语言，随后被广泛采用。

核心设计要素

• 半透明背景：使用 rgba 或 hsla 设置透明度
• 背景模糊：backdrop-filter: blur() 实现磨砂效果
• 细腻边框：1px 半透明白色边框增加层次感
• 柔和阴影：多层次阴影营造空间感

CSS 变量设计系统

:root {
  --primary: #6366f1;
  --accent: #06b6d4;
  --bg: #f8fafc;
  --surface: #ffffff;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --radius-md: 12px;
}

玻璃态导航栏实现

header {
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid rgba(226,232,240,0.6);
}

渐变 Hero 区设计

使用多层渐变叠加创建动态背景效果：

.hero {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 40%, #06b6d4 100%);
}
.hero::before {
  background: radial-gradient(ellipse 80% 50% at 20% 40%, rgba(99,102,241,0.4));
}

卡片悬停动效

使用 CSS transition 和 transform 创建流畅的交互体验：

.tool-card {
  transition: transform 0.25s, box-shadow 0.25s;
}
.tool-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

响应式设计

使用 clamp() 函数和媒体查询实现流畅的响应式布局：

h1 { font-size: clamp(1.5rem, 5vw, 2.5rem); }
@media (max-width: 768px) {
  .tools-grid { grid-template-columns: 1fr; }
}