backdrop-filter 实现毛玻璃需配合半透明背景（如 rgba），纯色背景下无效；须确保元素位于被模糊内容之上，并用 @supports 检测兼容性，避免 overflow: hidden 裁剪模糊区域，blur 值推荐 8–14px 以平衡效果与性能。

backdrop-filter 本身就能实现毛玻璃，但必须配合半透明背景

单纯写 backdrop-filter: blur(10px) 不会生效，因为背后内容默认被当前元素完全遮挡。关键是要让元素“透”出背后的区域——所以 background-color 必须带 alpha 通道（比如 rgba(255,255,255,0.8) 或 hsla(0,0%,100%,0.8)），或者直接设为 transparent。

常见错误：只加 backdrop-filter 却用纯色背景（如 #fff），结果什么也看不到。

• 推荐写法：background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(12px);
• 如果需要保留文字可读性，建议搭配 color 和 text-shadow 微调对比度
• 注意层级：该元素必须位于要“模糊”的背景内容之上（通常用定位或 flex 布局控制）

浏览器兼容性差是最大现实问题，Safari 和 Chrome 支持较好，Firefox 默认关闭

backdrop-filter 在 Firefox 中长期处于实验状态，默认禁用。用户需手动开启 about:config 中的 layout.css.backdrop-filter.enabled 才能生效；而移动端 Android Chrome 直到 v118+ 才稳定支持（旧版仅部分支持）。

• Safari（macOS/iOS）：从 v9 开始支持，最稳定
• Chrome：v76+ 支持，但 Android 上需较新版本
• Firefox：v110+ 可通过 flag 启用，但生产环境不建议依赖
• 务必加 @supports 检测做降级处理

body::before {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: url(bg.jpg) center/cover;
  z-index: -1;
}
.blur-card {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px); / Safari 需前缀 /
}
@supports (backdrop-filter: blur(0)) or (-webkit-backdrop-filter: blur(0)) {
.blur-card {
/ 启用毛玻璃样式 /
}
}
@supports not (backdrop-filter: blur(0)) and (not (-webkit-backdrop-filter: blur(0))) {
.blur-card {
background: rgba(255, 255, 255, 0.9); / 降级为高透明纯色 /
}
}

blur 值不是越大越好，超过 20px 容易糊掉文字边缘且性能下降

backdrop-filter: blur() 的参数是 CSS 长度值（px、em 等），但实际渲染中，过大的值会导致 GPU 负担加重，尤其在滚动或动画中容易卡顿。iOS Safari 对大于 30px 的值会自动截断或降级。

• 常规 UI 卡片推荐 blur(8px) ~ blur(14px)
• 避免在 :hover 或 @keyframes 中动态改变 blur 值——触发动态滤镜重绘，性能开销大
• 若需过渡效果，可对 opacity 或 background-color 做动画，而非 blur

父容器 overflow: hidden 会剪裁 backdrop-filter 效果

这是最容易被忽略的布局陷阱。backdrop-filter 的模糊范围默认延伸到元素边界外（用于采样背景），但如果父容器设置了 overflow: hidden，就会把模糊“溢出”部分裁掉，导致边缘生硬、不自然。

• 检查祖先元素是否含 overflow: hidden、clip-path 或 mask
• 临时调试技巧：给父容器加 outline: 1px solid red，看模糊区域是否被意外截断
• 解决方案：移除不必要的 overflow: hidden；或改用 overflow: clip（支持度较低）；或把毛玻璃元素提级到更外层容器中

实际项目中，毛玻璃效果的价值不在“酷”，而在视觉层次感——它天然暗示「浮层」与「背景」的关系。但一旦遇到兼容性或性能临界点，宁可放弃 blur 值的微调，也要确保文字清晰、滚动流畅、老设备可访问。