极致液态玻璃效果：纯 CSS 实现 Liquid Glass UI 教程

在网页设计中，液态玻璃（Liquid Glass）是一种极具视觉冲击力的效果，它模仿现实中玻璃的透光、模糊、反射与折射特性，使界面呈现出高级质感与流动感。本文将围绕如何仅使用 CSS（必要时结合 SVG 滤镜）实现这种效果展开详尽说明，适合现代 UI、按钮、卡片、模态框、仪表盘等设计场景。

基础结构：HTML + CSS

HTML 结构示例

<div class="glass">
  <!-- 内容放置区 -->
  <h3>Liquid Glass 卡片</h3>
</div>

CSS 基础样式

.glass {
  position: relative;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(2px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 2rem;
  box-shadow: 
    0 8px 32px rgba(31, 38, 135, 0.2),
    inset 0 4px 20px rgba(255, 255, 255, 0.3);
}

使用 backdrop-filter: blur() 制造柔和背景模糊。
rgba 背景带来半透明层次。
inset 内阴影营造深度感。
圆角和半透明边框塑造玻璃结构。

光泽与液态高亮：伪元素技巧

.glass::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2rem;
  backdrop-filter: blur(1px);
  box-shadow:
    inset -10px -8px 0 -11px rgba(255, 255, 255, 1),
    inset 0 -9px 0 -8px rgba(255, 255, 255, 1);
  opacity: 0.6;
  z-index: -1;
  filter: blur(1px) drop-shadow(10px 4px 6px black) brightness(115%);
}

这种伪元素方式能够模拟表面光泽滑动的视觉，仿佛光线在玻璃表面流动。

高级折射效果：SVG 滤镜与位移映射

Pure CSS 无法原生支持折射或内容扭曲，但可以通过 SVG 滤镜中的 <feTurbulence> 和 <feDisplacementMap> 实现：

<svg style="display:none">
  <filter id="distort" x="0%" y="0%" width="100%" height="100%">
    <feTurbulence type="fractalNoise" baseFrequency="0.008" numOctaves="2" result="noise"/>
    <feGaussianBlur in="noise" stdDeviation="2" result="blurred"/>
    <feDisplacementMap in="SourceGraphic" in2="blurred" scale="70" xChannelSelector="R" yChannelSelector="G"/>
  </filter>
</svg>

然后在 CSS 中应用：

.glass {
  backdrop-filter: url(#distort) blur(3px) saturate(200%);
}

使用这种方式，可以模拟内容被玻璃扭曲变形的折射感，类似 Apple 的 Liquid Glass 风格。

兼容性与渐进增强策略

现代浏览器（Chrome、Firefox、Safari、Edge）已支持 backdrop-filter，但对于 SVG 映射滤镜的支持可能有限—尤其在 WebKit 内核的 Safari 上仍存在兼容问题。为此：

提供基础版模糊和半透明背景，在不支持滤镜的浏览器上仍保持视觉一致。
在支持浏览器里加载 SVG 滤镜增强版。
避免影响可访问性，确保高对比度文本与适当大小的交互区域。

增强交互：动画与响应响应式效果

你可以通过 CSS 动画或交互伪类为玻璃组件增加交互感：

.glass:hover {
  background: rgba(255,255,255,0.2);
  box-shadow: 0 12px 40px rgba(31,38,135,0.3);
}

或使用 CSS 变量调节滤镜参数，搭配 JS 控件实时调试 -- Reddit 上就有提供可调节 Inner shadow、noise distortion 的演示工具。

总结与实践建议

核心技术：模糊（backdrop-filter）、半透明背景、阴影、伪元素高亮。
进阶滤镜：SVG 位移映射打造折射效果。
兼容策略：基础模糊 + 渐进增强、为老浏览器准备样式回退。
交互与动画：hover、变量控制、动态调整增加应用感。

Liquid Glass 效果非常适合用作卡片、按钮、模态弹窗、拖拽窗口等视觉界面元素。关键在于在追求视觉质感的同时，保证性能表现与可访问性水平。