<p>backdrop-filter: blur() 实现磨砂效果需同时满足三条件：背景必须半透（如 rgba）、父容器不能 overflow: hidden、body 或上层需有真实背景；且须写 -webkit- 前缀，Firefox 仍不默认支持。</p>
直接用 backdrop-filter: blur()，别碰 filter: blur() 或 background-blend-mode——前者糊自己，后者压根不模糊，都不是磨砂。
为什么 backdrop-filter 不生效？常见三处断点
磨砂卡片“没效果”，90% 是卡在这三个地方：
-
background写成了#fff或white：必须是rgba(255,255,255,0.2)或transparent，否则背后内容被完全遮住，blur()就没东西可模糊 - 父容器加了
overflow: hidden：比如 modal、header、flex 容器常用这个，会裁掉 backdrop 可捕获的区域，导致模糊只作用于可视部分，边缘发硬甚至消失 - body 或上层容器没真实背景：纯白底 + 磨砂卡片 = 看不出区别。得有
background-image、渐变，或至少是background: linear-gradient(...)
backdrop-filter 必须加前缀，且 Firefox 仍不默认支持
Safari 和旧版 Chrome 非加 -webkit-backdrop-filter 不工作；Firefox（截至 2026 年 4 月）仍需用户手动开启 layout.css.backdrop-filter.enabled，生产环境不能依赖。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 必须写两遍：
-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); - 降级方案只能是纯
rgba()背景，别用filter: blur()模拟——那是把文字和图标一起糊掉 - 可用
@supports (backdrop-filter: blur(0))做特性检测，给不支持者套一层background-color: rgba(255,255,255,0.85)
堆叠卡片时，margin-top: -Xpx 比 transform: translateY() 更稳
要做出物理堆叠感，光靠 z-index 不行；而用 transform 会创建新层叠上下文，容易让阴影被下层裁切、z-index 错乱。
立即学习“前端免费学习笔记（深入）”；
- 统一设
position: relative，再配z-index控制顺序 - 用
margin-top: -12px（推荐 -8px～-16px）实现错位，不触发重排，兼容性好 - 所有卡片父容器不能有
overflow: hidden，否则负边距部分直接被裁掉 - 搭配
border-radius: 16px和轻微box-shadow，圆角内侧模糊更自然
真正难的不是写对那几行 CSS，而是确保「背后有内容可模糊」+「自身够透明」+「容器不截断」三者同时成立；少一个，磨砂就变成一块灰蒙蒙的半透板。
