毛玻璃效果唯一可靠方案是 backdrop-filter。需配合半透背景色（如 bg-white/20）而非 transparent 或 opacity-20，且须用 @supports 检测兼容性并提供降级样式，推荐自定义 .glass 类结合 backdrop-blur 与 backdrop-saturate 使用。
毛玻璃效果的核心是 backdrop-filter
纯 CSS 实现毛玻璃（frosted glass）效果，backdrop-filter 是唯一可靠方案。Tailwind 本身不内置该属性，但你可以直接在 class 中写内联样式，或通过 @layer utilities 扩展自定义工具类。别指望 bg-opacity 或 blur 单独用能生效——它们只作用于元素自身，而毛玻璃需要「模糊背后的内容」。
必须设置 background-color 且带透明度
即使用了 backdrop-filter: blur(10px)，如果背景是完全透明（transparent）或纯色不透明，也看不出毛玻璃感。常见错误是只加 blur 却忘了设半透背景：
-
bg-white/20✅ 推荐：白色 + 20% 透明度（Tailwind v3.3+ 支持/语法） -
bg-black/10✅ 暗色主题下更自然 -
bg-transparent❌ 没有颜色层，blur 就没作用对象 -
bg-white opacity-20⚠️ 错误：opacity 会同时降低整个元素（含子内容）的不透明度，不是毛玻璃逻辑
兼容性与降级处理不能省
backdrop-filter 在 Safari 和 Chrome 较新版本支持良好，但 Firefox 默认禁用（需用户手动开启 layout.css.backdrop-filter.enabled），旧版 Android WebView 基本不支持。所以必须提供视觉降级：
- 用
@supports (backdrop-filter: blur(1px))包裹毛玻璃样式，避免干扰基础样式 - 降级方案建议用
bg-white/5+border border-white/10模拟轻量通透感，而非直接回退到不透明色块 - 不要依赖
prefers-reduced-motion来关 blur——它控制的是动画，不是滤镜；真正要检测的是backdrop-filter本身是否可用
实际用法：一个可复用的 Tailwind 自定义类
在 tailwind.config.js 的 theme.extend 或 @layer utilities 中添加：
立即学习“前端免费学习笔记（深入）”；
@layer utilities {
.glass {
@apply bg-white/10 backdrop-blur-md backdrop-saturate-150;
}
.glass-dark {
@apply bg-black/10 backdrop-blur-sm backdrop-saturate-125;
}
}
然后在 HTML 中使用：<div class="glass rounded-xl p-6">。注意：backdrop-blur-md 对应 blur(12px)，数值太大（如 blur-3xl）在小容器里反而显得脏，推荐从 sm 到 md 范围试起。饱和度（backdrop-saturate）调高一点能让色彩更“清透”，这是容易被忽略的细节。
