毛玻璃效果必须用 backdrop-filter 而非 filter，需启用 Tailwind 配置、设置透明背景、确保父级有可透出背景，并注意 iOS 兼容性与性能优化。
毛玻璃效果的核心是 backdrop-filter，不是 filter
很多人一搜“滤镜”就直接用 filter: blur()，结果发现整个元素（包括文字、子元素）都糊了——这是 filter 的行为，它作用于**整个渲染树**。毛玻璃要的是背景模糊，内容清晰，必须用 backdrop-filter，它只影响元素**背后区域的渲染**。
在 Tailwind 中，它对应的是 backdrop-blur-{size} 工具类（如 backdrop-blur-md），但前提是：该元素必须有**透明背景**（bg-transparent 或带 alpha 的 bg-white/80），且父容器有可被“透出”的背景（比如 body 上设了 bg-gradient-to-br from-slate-100 to-slate-300）。
常见错误现象：backdrop-blur-md 完全没效果 → 大概率是背景不透明，或父级没有背景可透出。
Tailwind 默认不启用 backdrop-filter，需手动开启
Tailwind v3.0+ 默认禁用 backdrop-filter 相关工具类，因为它的浏览器兼容性较弱（Safari 9+、Chrome 76+、Firefox 103+ 支持；旧版 Firefox 需要 -moz-backdrop-filter，但 Tailwind 不生成前缀）。你必须在 tailwind.config.js 的 theme.extend 或 plugins 中显式启用：
立即学习“前端免费学习笔记（深入）”；
module.exports = {
theme: {
extend: {
backdropBlur: {
xs: '2px',
sm: '4px',
md: '8px',
lg: '12px',
xl: '16px',
}
}
}
}
然后才能使用 backdrop-blur-sm 等类名。不配置就写不死，不会报错，只会静默失效。
顺带提醒：backdrop-brightness、backdrop-contrast 等也得同样配置才可用，Tailwind 不默认开全套。
必须配合半透明背景，且注意层级与溢出
毛玻璃不是“加个类就完事”，它依赖视觉叠加。关键三点：
-
backdrop-blur只对「透过该元素能看到的背景」起作用，所以父容器必须有真实背景（不能是空的 div） - 该元素自身背景必须带透明度，推荐用
bg-white/50、bg-black/20这类新语法（v3.3+），老版本用bg-opacity-50+bg-white - 如果父容器设置了
overflow-hidden，而子元素用了backdrop-blur，模糊可能被裁掉边缘 —— 模糊半径会向外扩散，需要预留空间
一个最小可行示例：
<div class="bg-gradient-to-r from-cyan-400 to-purple-500 min-h-screen">
<div class="backdrop-blur-md bg-white/30 p-6 rounded-xl max-w-md mx-auto mt-20">
<p class="text-gray-800">文字依然清晰</p>
</div>
</div>
移动端 Safari 和旧 Chrome 的兼容性陷阱
即使启用了 backdrop-filter，iOS 15.4 之前的 Safari 对 backdrop-blur 在滚动容器（overflow-y-auto）中支持极差，常出现闪烁、模糊丢失或完全不生效。解决方案不是加前缀，而是降级：
- 用
@supports (backdrop-filter: blur(1px))写 CSS 做渐进增强 - 对不支持的环境，fallback 到纯色半透明背景（
bg-black/10）或轻微阴影（shadow-sm） - 避免在
position: fixed+backdrop-blur的导航栏上强依赖 —— iOS 很容易卡顿
最易被忽略的一点：模糊本身不触发硬件加速，但在长列表滚动中频繁重绘 backdrop 区域，性能敏感场景建议限制模糊半径（别用 xl 以上），并确保父背景是纯色或简单渐变，而非复杂图片或 SVG。
