只用了 2 行 CSS，我们还原了 Vision Pro 的毛玻璃动效是的，你没看错。我们在一个组件中，只用了 2 行

是的，你没看错。

我们在一个组件中，只用了 2 行 CSS，就还原出了 Apple Vision Pro 系统里的「毛玻璃 UI 效果」，还带一定程度的背景滚动模糊、亮度抬升、高斯柔光——核心关键点就两行：

backdrop-filter: blur(20px);
background-color: rgba(255, 255, 255, 0.1);

当然，光靠这两行只是“视觉近似”，但如果你希望把它真正落地到业务 UI，还有一些细节要处理清楚：兼容性、性能、边界、如何动态响应背景变化、如何避免 z-index 下穿。

🧪 还原效果 demo

以下是我们还原的效果，滚动背景动态模糊、边角有高斯柔光、半透明不影响交互：

.glass {
  backdrop-filter: blur(20px);
  background-color: rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 24px;
  color: #fff;
}

💡 关键知识点

1️⃣ `backdrop-filter` 和 `filter` 的区别

很多人搞混了 filter 和 backdrop-filter。

filter: blur(10px) 是让当前 DOM 自己模糊；
backdrop-filter 是让下层内容“被当前层模糊”，也就是背景变模糊，前景保持清晰。

你必须设置一个半透明背景，比如 rgba(255,255,255,0.1)，这个效果才可见。

2️⃣ Safari 和 Chromium 都支持了吗？

是的。截止 2025 年：

✅ Chrome：112+ 完整支持
✅ Edge：112+
✅ Safari：全系支持（从 iOS 15 起）
⚠️ Firefox：默认关闭，需要开启 layout.css.backdrop-filter.enabled

如果你要对 Firefox 提示降级体验，只需做简单判断：

if (!CSS.supports("backdrop-filter", "blur(4px)")) {
  // 降级处理，比如用透明度 + 背景图模拟
}

3️⃣ 如何防止“穿透点击”？

由于 backdrop-filter 本质是 GPU 图层 + 透明背景渲染，很多同学会出现点击穿透下层按钮的情况。

解决方案：

pointer-events: auto;

同时避免设为 none，并确保你的模糊层不是 z-index: -1 级别的负向定位。

4️⃣ 动效版本（滚动/渐入）

Vision Pro 的玻璃效果不是固定的，而是有淡入淡出、跟随滚动渐进模糊的动画感。

配合 opacity 和动画属性可以模拟：

.glass {
  backdrop-filter: blur(0px);
  transition: backdrop-filter 0.5s ease, background-color 0.3s ease;
}

.glass.show {
  backdrop-filter: blur(20px);
  background-color: rgba(255,255,255,0.1);
}

使用 JS 控制：

const el = document.querySelector('.glass')
setTimeout(() => {
  el.classList.add('show')
}, 100)

5️⃣ `blur()` 多少合适？能用 `saturate()` 吗？

blur(20px) 是视觉较“糊”的效果，太大会显得不真实；
Apple 的 VisionOS 中，实际组合是：

backdrop-filter: blur(20px) saturate(1.5);

saturate 提高背景颜色浓度，让模糊后的背景更具空间感。

最终优化版本 CSS

.glass {
  backdrop-filter: blur(20px) saturate(1.2);
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  color: #fff;
  padding: 24px;
  transition: backdrop-filter 0.4s ease;
}

效果:

⚠️ 性能注意事项

毛玻璃本质依赖硬件加速：

在移动端上慎用，blur() 和 saturate() 会导致部分中端 Android 上掉帧；
尽量避免在大面积 div 上使用，可以限制高度/宽度；
推荐加上 will-change: backdrop-filter; 提前触发合成层，避免首次卡顿：

.glass {
  will-change: backdrop-filter;
}

🧾 最后

我们确实只用了两行 CSS 起步还原效果，但要真在项目中稳定使用毛玻璃，还有很多细节要考虑：兼容性、性能、组件封装、交互逻辑。用 CSS 也能做到，差的只是细节而已。欢迎分享🙂

只用了 2 行 CSS，我们还原了 Vision Pro 的毛玻璃动效