引言

最近看到一篇有趣的文章：Apple has a private CSS property to add Liquid Glass effects to web content，介绍了 Apple 的私有 CSS 属性 -apple-visual-effect，可以在支持的设备上实现真正的液态玻璃效果。

受此启发，我决定为自己的博客添加这种现代化的视觉效果。

实现原理

Apple 私有属性支持

对于支持的 Apple 设备，我们使用 -apple-visual-effect 属性：

@supports (-apple-visual-effect: -apple-system-glass-material) {
    .glass-effect {
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        -apple-visual-effect: -apple-system-glass-material;
    }
}