backdrop-blur在Safari≤16.6及旧版Chrome中默认不生效，因仅支持-webkit-backdrop-filter前缀；需手动补全且值须与Tailwind模糊等级严格对齐（如backdrop-blur-sm对应blur(4px)），同时确保tailwind.config.js正确配置backdropBlur映射、清缓存重启构建，并搭配半透明背景与真实背后内容才能生效。
backdrop-blur 在 Safari 和旧版 Chrome 里完全不生效
不是你的代码写错了，是浏览器根本没执行 backdrop-filter。Safari ≤16.6、部分 macOS Chrome（尤其是 119 之前）只认 -webkit-backdrop-filter，而 Tailwind 默认只输出标准属性。
必须手动补全 WebKit 前缀，且值要和 Tailwind 的模糊等级严格对齐：
.glass-card {
@apply bg-white/10 backdrop-blur-sm;
-webkit-backdrop-filter: blur(4px) saturate(1.5);
}
-
backdrop-blur-sm对应4px，不能写成blur(8px)，否则 Safari 显示未模糊的原始背景 - 别在同一个元素上混用
style="backdrop-filter: ..."和backdrop-blur-sm，后者会被前者覆盖 - 如果用了 CSS 变量动态控制模糊度，Safari ≤16.x 会直接忽略
var(--blur)，必须同时提供静态 fallback
tailwind.config.js 配置了但 backdrop-blur-md 还是无效
Tailwind v3.1+ 虽声明支持 backdrop-blur，但默认不生成任何规则——类名写了也等于没写，构建后 CSS 文件里搜不到 backdrop-filter。
三步确认配置是否真正生效：
立即学习“前端免费学习笔记（深入）”；
- 运行
npm list tailwindcss，确保版本 ≥3.1.0 - 检查
tailwind.config.js中theme.extend.backdropBlur是否存在，且值是字符串（如'sm': '4px'），不能是数字或blur(4px) - 清缓存并重启 dev server：
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch或对应框架命令
打开最终生成的 dist/output.css，搜索 backdrop-filter: blur(4px) —— 没搜到就说明配置失败，别浪费时间调透明度或 z-index。
毛玻璃效果“糊了个寂寞”，背后内容没被模糊
backdrop-filter 模糊的是元素「背后」的像素，不是它自己。背后空、前面不透、父容器裁剪，任一成立，效果就不可见，且 DevTools 不报错，只能靠视觉排查。
- 元素自身必须有 alpha 通道背景：
bg-white/10可行，bg-white或bg-gray-50（无透明度）直接失效 - 父容器不能设
overflow: hidden或clip-path，否则截断采样区域，边缘模糊缺失甚至整块变灰白 - 背后必须有真实内容：模态框建议挂载到
document.body直接子级；侧边栏若嵌在z-index: 0的 wrapper 里，可能被遮挡 - 避免在
position: fixed元素上使用，若祖先有transform或filter，会创建新 stacking context，backdrop-filter只模糊该 context 内内容
动态模糊导致滚动卡顿或文字发虚
每次修改 --blur-radius 都触发合成层重绘，GPU 负担陡增，这不是 bug，是渲染机制决定的。
- 模糊半径别超过
24px，实测8px–16px是性能与可读性的平衡点；backdrop-blur-xl（16px）在高分屏上已易让文字边缘发虚 - 避免在频繁变化的元素上用动态模糊（比如跟随鼠标移动的浮层），hover 动画中慎用
- 父容器不能有
overflow: hidden，否则模糊区域被裁，渲染异常 - 用
@layer glass统一管理所有毛玻璃样式，避免跨层覆盖；@supports必须包裹整个规则块，不能塞进 SCSS mixin 里
最常被忽略的点：模糊效果依赖像素采样，背后若被 z-index 遮罩盖住、或父层 overflow: hidden 截断采样区域，滤镜就变成“糊了个寂寞”——连控制台都不会报错，只能靠 DevTools 逐层检查渲染树和图层合成。
