<p>毛玻璃效果必须用 backdrop-filter，Safari 15.4+ 才真正可靠；需加 -webkit- 前缀，避免 overflow/transform 干扰，Tailwind 需手动配置 backdropBlur，父容器须设明确背景，滚动状态宜用 data 属性配合 CSS 过渡。</p>
毛玻璃效果必须用 backdrop-filter，但 Safari 15.4+ 才真正可靠
苹果官网的导航栏不是靠半透明背景蒙层（rgba(255,255,255,0.8)）硬凑的，核心是 backdrop-filter: blur(20px)。但这个 CSS 属性在旧版 Safari（尤其是 iOS 15.4 之前）会直接失效或渲染为纯白——不是你写错了，是浏览器根本不支持。Chrome 和 Firefox 虽然支持，但默认开启硬件加速才稳定，否则可能闪烁或卡顿。
实操建议：
- 必须加
-webkit-backdrop-filter前缀，哪怕现代 Safari 已支持无前缀版本，某些 iOS WebView 仍只认带前缀的写法 - 避免在
backdrop-filter元素上同时设overflow: hidden或transform: translateZ(0)，这会触发层叠上下文，导致毛玻璃区域被裁剪或消失 - 测试时优先用真机（iOS 16+ / macOS Ventura+），模拟器对 backdrop-filter 的模拟常有偏差
Tailwind 中不能直接写 blur(20px)，得配 custom config
Tailwind 默认不提供 backdrop-blur 工具类，且它的 blur 类（如 blur-md）只作用于元素自身，不是背景模糊。想用 backdrop-filter，必须手动扩展配置。
在 tailwind.config.js 的 theme.extend 里加：
立即学习“前端免费学习笔记（深入）”；
backdropBlur: {
'xs': '2px',
'sm': '4px',
'md': '8px',
'lg': '12px',
'xl': '20px',
'2xl': '30px',
}再在 plugins 数组里加入 require('tailwindcss/plugins/backdropBlur')（Tailwind v3.3+ 内置，v3.2 及更早需额外安装插件）。之后才能用 backdrop-blur-xl 这类类名。
注意：Tailwind 的 backdrop-blur 类生成的是 backdrop-filter: blur(...)，不是 filter: blur(...)，别混淆。
颜色透出不稳定？问题大概率出在父容器没设 background
毛玻璃要“透”，前提是背后有内容可透。但很多人发现导航栏一片灰白——不是 backdrop-filter 失效，而是父级容器（比如 <header>）没有显式设 background-color，或者设了 transparent，导致浏览器把背景当成黑色或系统默认色来模糊。
正确做法：
- 导航栏本身用
bg-white/10（或bg-black/5）提供轻微底色，让模糊有“基底”可算 - 确保其父容器（如
<body>或<div class="min-h-screen">）有明确背景，比如bg-gradient-to-b from-gray-50 to-gray-100 - 禁用
bg-transparent在毛玻璃元素上——它会让 backdrop-filter 失去参考基准，尤其在深色模式切换时容易崩
滚动时变色/隐藏？别用 IntersectionObserver 直接改 class
苹果官网导航在滚动后变深、收窄，靠的是监听 scrollY 动态切 bg-white/5 → bg-white/90，但直接用 JS 切 Tailwind 类名会导致重排抖动。更稳的方式是预定义两套状态类，用 style.transform 控制 opacity 和 backdrop-blur 强度。
例如：
<header class="fixed top-0 left-0 right-0 z-50 transition-all duration-300 backdrop-blur-xl bg-white/10">
<div class="h-20 data-[scrolled=true]:h-16 data-[scrolled=true]:backdrop-blur-lg data-[scrolled=true]:bg-white/90">
<!-- nav content -->
</div>
</header>然后用轻量 JS 设置 dataset.scrolled = window.scrollY > 50。这样所有变化都走 CSS transition，不触发 layout，也避免 Tailwind 类名频繁增删带来的性能开销。
真正难的不是写出来，是让 backdrop-filter 在各种缩放、深色模式、字体放大设置下都不破相——它依赖整个渲染树的背景层级，漏掉一层就会全盘失焦。
