使用 CSS 实现 iOS 26 液态玻璃（Frosted Glass）效果

随着设计趋势的不断演进，液态玻璃（Frosted Glass） 效果在现代 UI 设计中越来越流行。它最早由 macOS 和 iOS 引入，通过模糊和透明度营造出一种朦胧、层次分明的视觉体验。虽然目前 iOS 还未发布到 iOS 26（截至 2025 年初仍为 iOS 18），但我们可以基于已有的设计语言，提前探索并实现类似"未来版本"中的视觉风格。

本文将带你使用纯 CSS 技术来实现一个类似 iOS 风格的液态玻璃效果，并结合 HTML 创建一个简单的卡片组件示例。

🧪 效果预览

我们将创建一个带有背景图像的容器，并在其上放置一个半透明模糊的卡片元素，模拟出"液态玻璃"的质感。

✅ 实现原理

液态玻璃的核心是以下几种 CSS 特性：

backdrop-filter: 对元素背后区域应用图形效果（如模糊）
background-color + 半透明值：营造雾面玻璃感
box-shadow: 增加立体感和柔和边缘
border-radius: 圆角处理更贴近现代设计

💻 示例代码

🔹 HTML 结构

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Frosted Glass Card</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="background"></div>
  <div class="glass-card">
    <h2>iOS 26 液态玻璃卡片</h2>
    <p>这是使用 CSS 实现的 Frosted Glass 效果。</p>
  </div>
</body>
</html>

🔹 CSS 样式（style.css）

css 复制代码

/* Reset & base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body, html {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background: url('https://images.unsplash.com/photo-1529156069898-49953e39b3ac') no-repeat center center/cover;
  display: flex;
  align-items: center;
  justify-content: center;
}

.background {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  backdrop-filter: blur(10px);
  z-index: 1;
}

.glass-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  z-index: 2;
  max-width: 400px;
  width: 90%;
}

.glass-card h2 {
  margin-bottom: 15px;
  font-size: 24px;
}

.glass-card p {
  font-size: 16px;
  line-height: 1.5;
}

📝 关键点解析

属性	说明
`backdrop-filter: blur(...)`	对元素背后的区域进行模糊处理，是实现液态玻璃的关键
`rgba(255,255,255,0.1)`	设置一个低透明度的背景色，模拟玻璃质感
`box-shadow`	增强卡片的立体感和柔和边缘
`-webkit-backdrop-filter`	在某些旧版 Safari 中需要添加前缀兼容
`border: 1px solid rgba(...)`	添加轻微边框，提升轮廓清晰度

🖥️ 浏览器兼容性

浏览器	支持情况
Chrome	✅ 支持
Firefox	⚠️ 部分支持（需启用实验功能）
Safari	✅ 支持良好
Edge	✅ 支持
移动端浏览器	✅ 大部分支持（iOS Safari 完美支持）

注意：backdrop-filter 在部分移动端或老版本浏览器中可能不被支持，建议设置 fallback 样式。

🛠️ 进阶技巧

动态模糊过渡

你可以使用 transition 让模糊效果平滑变化：

css 复制代码

.glass-card {
  transition: backdrop-filter 0.3s ease-in-out;
}

.glass-card:hover {
  backdrop-filter: blur(30px);
}

色彩滤镜叠加

可以尝试使用 backdrop-filter 的其他滤镜，比如对比度、饱和度等：

css 复制代码

backdrop-filter: blur(20px) contrast(120%) saturate(120%);

🧩 实际应用场景

登录模态框 / 弹窗
导航栏 / TabBar（移动端）
图片卡片展示
数据面板 / 控制面板
iOS 风格通知中心组件

✅ 总结

使用 CSS 的 backdrop-filter，我们能够轻松地实现类似 iOS 中的液态玻璃（Frosted Glass）效果。尽管该技术在部分浏览器中兼容性仍有局限，但在现代 Web 开发中已经可以广泛使用，尤其适合打造具有高级感的用户界面。

随着 Web 技术的发展，像这种曾经只能依赖原生渲染的效果，如今只需几行 CSS 就能实现，大大提升了前端开发的创意空间。

📚 参考链接

如果你喜欢这篇文章，欢迎点赞、分享或关注我获取更多前端设计与开发技巧！📱✨