必须手动启用 backdropblur 并添加 -webkit 前缀才能生效：在 tailwind.config.js 中配置 backdropblur 和 backdropsaturate，重启服务；使用 bg-white/10 而非 transparent 或 opacity；确保父容器无 overflow-hidden 且背后有内容；safari/x5 需额外定义 .glass 兼容类。
直接写 backdrop-blur-md bg-white/10 不会生效——Tailwind 默认禁用 backdrop 工具类，且 Safari、微信 X5 等环境必须补前缀，否则毛玻璃就是个透明色块。
tailwind.config.js 必须手动启用 backdropBlur
Tailwind v3.1+ 起，backdrop-blur-* 类名默认不生成 CSS。写了等于白写，控制台也不报错。
- 在
tailwind.config.js的theme.extend中添加：backdropBlur: { sm: '4px', md: '8px', lg: '12px' }（值必须是带引号字符串） - 别漏掉
backdropSaturate映射（如需调饱和度）：backdropSaturate: { 125: '1.25' } - 改完必须重启开发服务（Vite/Next.js）或重跑构建命令，否则
dist/output.css里搜不到backdrop-filter
卡片自身背景不能是 transparent 或靠 opacity 实现
bg-transparent 或 bg-white opacity-20 都无法触发毛玻璃效果——前者没颜色层供模糊采样，后者把子元素也变透明，破坏可读性。
- 正确写法只有一种：
bg-white/10（v3.3+ 支持的斜杠语法）或bg-[#ffffff1a] - 浅色主题推荐
/10～/20，深色主题可用bg-black/5～bg-black/10 - 别设
opacity，它会切断 backdrop 的像素采样链路
Safari 和微信 X5 必须手动加 -webkit-backdrop-filter
Tailwind 默认只输出标准 backdrop-filter，但 Safari ≤16.6、部分 macOS Chrome、微信 X5 内核完全忽略它，且无任何提示。
- 不要指望
backdrop-blur-md自动兼容 —— 它不会生成-webkit-backdrop-filter - 在
@layer utilities中定义兼容类：.glass { @apply bg-white/10 backdrop-blur-md; -webkit-backdrop-filter: blur(8px); } - WebKit 前缀里的数值必须和
backdropBlur.md值严格一致（比如'8px'），否则 Safari 显示未模糊的原始背景 - 微信 X5 完全不支持 backdrop-filter，降级建议：
bg-black/5 blur-sm shadow-sm（作用于自身，非背景）
背后没内容 or 父容器 overflow-hidden 就等于白搭
backdrop 模糊的是“背后区域”，如果底下是纯白 body、或父容器裁掉了采样范围，那模糊就糊了个寂寞。
- 确保卡片挂载位置下方有真实内容（比如带背景图的
section，或滚动区域） - 删掉父容器的
overflow-hidden（尤其rounded-xl overflow-hidden这类组合）——它会直接砍掉 backdrop 所需的采样区 - 堆叠卡片场景中，给卡片加
relative和正向z-index（如z-10），避免被遮挡 - 测试时打开浏览器开发者工具，检查最终渲染的 CSS 是否含
backdrop-filter: blur(8px)和-webkit-backdrop-filter
最容易被忽略的点：backdrop-saturate 不是可选项，而是质感关键。单独加 backdrop-blur-md + bg-white/10 会发灰发闷；加上 backdrop-saturate-125 后，背后色彩才清透不混沌——但它也得在 config 里显式配好，否则照样不生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
