backdrop-filter: blur() 是唯一能实现真实磨砂质感的 CSS 属性，需同时满足半透明背景（如 rgba(255,255,255,0.15)）、父容器无 overflow: hidden、背后有真实内容三个条件；Safari 需 -webkit 前缀，Firefox 默认禁用，blur 值推荐 4–12px，alpha 控制在 0.12–0.2 间。

backdrop-filter: blur() 是唯一能做出真实磨砂质感的 CSS 属性，filter: blur() 和 background-blend-mode 都不行——前者糊掉整个元素，后者根本不模糊背景。

为什么 backdrop-filter 常常不生效

不是代码写错，而是三个硬性条件没满足：

• background 必须是半透明：写 rgba(255, 255, 255, 0.15) 或 transparent，不能是 #fff、white 或 rgba(0,0,0,1)
• 父容器不能有 overflow: hidden 或 contain: strict：它们会裁剪 backdrop 的采样区域，导致边缘发硬甚至完全失效
• 背后必须有“真内容”：body 得有 background-image、渐变，或者至少一层带图的祖先容器；纯白底 + 磨砂卡片 = 看不出效果

Safari 和 Firefox 的兼容写法必须带前缀

截至 2026 年 6 月，Safari（包括 iOS 微信 X5 内核）仍需 -webkit-backdrop-filter，Firefox 默认禁用该特性（layout.css.backdrop-filter.enabled = false），无法靠 @supports 启用，只能降级。

• 必须同时写两行：-webkit-backdrop-filter: blur(10px); 和 backdrop-filter: blur(10px);
• 用 @supports (backdrop-filter: blur(0)) 做检测，不支持时只保留 background-color: rgba(255, 255, 255, 0.15) + border-radius + 轻量阴影
• 别在同一个元素上叠加 ::before + filter: blur()：Safari 可能双模糊，低端安卓 WebView 可能卡死

blur() 值和 rgba() alpha 怎么配才不翻车

数值不是越大越高级，它直接决定可读性与性能表现：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• blur(4px)～blur(8px)：适合导航栏、小浮层，文字边缘柔化但轮廓清晰
• blur(10px)～blur(12px)：主流卡片/模态框推荐区间；alpha 推荐 0.12～0.2，低于 0.08 几乎看不出玻璃感，高于 0.25 易显雾面塑料感
• 超过 blur(16px)：中低端设备滚动掉帧明显；非 Retina 屏上细字体（如 font-weight: 300）开始发虚

IE / 旧版 Android WebView 的降级底线

IE 全系、Android WebView backdrop-filter，且无法用 CSS 模拟出动态毛玻璃效果——因为它是实时作用于滚动/动画中背景的。

立即学习“前端免费学习笔记（深入）”；

• 绝对不要用 filter: blur() “反向模糊背景”，它会把文字、图标、边框全糊掉
• 稳妥做法是分层 fallback：支持时用磨砂，不支持时用 background: rgba(255,255,255,0.2) + box-shadow: 0 2px 12px rgba(0,0,0,0.06)
• 若设计稿强要求视觉一致性，可服务端生成带模糊背景的 base64 图片，但仅适用于静态背景，且增加首屏加载负担

真正让磨砂效果稳住的关键，不在 blur 多大，而在背景是否透、背后是否有内容、父容器是否裁剪——这三个点漏一个，backdrop-filter 就是摆设。