用途：这是基于 CSS backdrop-filter 实现玻璃拟态（毛玻璃表面，如吸顶头部、模态遮罩、导航栏、图片上的卡片）的操作参考，针对 evergreen-2026 浏览器。
主要能力：涵盖属性语法、半透明背景的前提条件、backdrop-root 触发原因排查、模糊背景下的对比度保持、移动端性能预算、面向 Baseline 2024 之前浏览器的 @supports 门控，以及 prefers-reduced-transparency 的降级分支。不覆盖渐变、微交互动效、light-dark() 主题与 React 组件封装。
必要用法要点：始终给玻璃元素设置半透明 background-color，否则滤镜无可模糊对象；当 backdrop-filter 不生效时，先检查祖先链是否存在 opacity<1、filter、mask、mix-blend-mode、clip-path、另一个 backdrop-filter、isolation: isolate、contain: paint/layout/strict 等 backdrop-root 触发条件；用 @supports (backdrop-filter: blur(1px)) 提供纯色回退；提供 prefers-reduced-transparency: reduce 分支；动画只做 opacity 或 transform，不要动画 backdrop-filter 本身；同一层叠中只保留一层 backdrop-filter。决策树建议：模糊半径对清晰文字/细图形用 8–12px，照片吸顶头部用 12–20px 配 saturate，动画背景桌面 16–24px、移动端 8–16px，全屏模态 24–40px。
示例（保留原样）： .glass { background: oklch(0.99 0 0 / 0.6); backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%); border: 1px solid oklch(0.99 0 0 / 0.3); border-radius: 12px; } @supports not (backdrop-filter: blur(1px)) { .glass { background: oklch(0.99 0 0 / 0.95); } } @media (prefers-reduced-transparency: reduce) { .glass { backdrop-filter: none; background: oklch(0.99 0 0); } }
限制与状态：backdrop-filter 于 2024 年 9 月 Newly Available（Baseline 2024）；-webkit- 前缀自 2024 年起非必需但对旧 Safari 无害；prefers-reduced-transparency 为 Limited Availability 实验性。资料未提供官方文本与收录来源。