backdrop-filter 失效主因是背后无真实 DOM 内容可模糊，必须满足：元素背景为 rgba/hsla 半透明、父容器有图片/渐变/滚动内容、祖先链无 overflow:hidden；Safari 需加 -webkit 前缀，Firefox 不支持需 @supports 降级。
写了 backdrop-filter 却看不到毛玻璃效果，大概率不是语法写错，而是它根本没东西可模糊——这个属性只作用于元素“视觉后方”的真实 DOM 内容，不模糊自身、不模糊父背景色、也不模糊空区域。
背后有没有内容可模糊？先验证再调样式
这是 90% 失效的根源。浏览器不会报错，但会静默跳过渲染。
- 临时给目标元素加
background: rgba(255, 255, 255, 0.1)和border: 1px solid red，观察红框「背后」是否出现模糊——如果背后是纯白或空白，说明没有可模糊的内容 - 确保父容器（比如
<body>）有真实内容：背景图、滚动文字、渐变色、甚至只是几行<p>都行；纯色background: #fff不算「可模糊内容」 - 避免把毛玻璃元素放在
overflow: hidden的父容器里——它会裁掉模糊所需的像素扩散范围，尤其在 Safari 中直接失效
Safari 必须加 -webkit-backdrop-filter，且不能省略 rgba 背景
Safari 14+ 才稳定支持，且对写法更敏感。不加前缀或背景用 transparent，效果就等于没写。
- 必须同时写两行：
-webkit-backdrop-filter: blur(8px)和backdrop-filter: blur(8px) -
background-color必须是rgba()或hsla()，alpha 值建议 0.08–0.15；transparent在 iOS 13.4–15.x 中可能被当作无背景处理 - 别在同一个元素上叠加
filter: blur()，Safari 渲染管线会冲突，导致 backdrop 完全不触发
@supports 检测要覆盖前缀，降级色值得反向调整
Firefox 目前（v127）仍不支持 backdrop-filter；旧版 Chrome/Safari 也可能静默忽略。靠 @supports 包裹不是可选项，是必选项。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
立即学习“前端免费学习笔记（深入）”；
- 检测条件要包含前缀：
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) - 降级色（
@supports外层）要比启用毛玻璃时更浓一点，比如rgba(255,255,255,0.12)；而毛玻璃启用后反而要用更淡的rgba(255,255,255,0.08)，因为模糊本身已削弱对比度 - 别依赖 JavaScript 的
CSS.supports()检测——某些 Safari 版本返回false但实际可用，造成误判
blur() 值不是越大越高级，6px 是多数场景的安全线
超过 12px 后性能下降明显，iOS 上还可能触发合成降级；太小又看不出效果。关键不是数值，而是设备实际观感。
- 移动端优先试
blur(6px)，桌面端可到blur(10px)；别用rem或%，blur()只接受绝对单位 - 如果卡片内有小字号文字或 SVG 图标，它们边缘会被连带模糊——解决方法是把内容抽离为兄弟节点（绝对定位），而非子元素
- 慎用
position: fixed+backdrop-filter组合，尤其在滚动容器内；iOS Safari 和部分 Android WebView 会出现错位或闪烁
真正难的不是写对那一行 backdrop-filter，而是判断背后有没有内容、Safari 是否真的在渲染、以及模糊值在不同设备上是否还在「玻璃感」和「可读性」之间保持平衡。
