真正磨砂效果需 backdrop-filter: blur() 实现局部背景模糊+半透明遮罩，background-blend-mode 仅静态混合且无模糊，不适用；需配合 @supports 特性检测与合理降级。
background-blend-mode 混合背景不等于磨砂
很多人一搜“HTML磨砂效果”，立刻试 background-blend-mode，结果发现只是两张图叠在一起变色，完全不是 macOS 或 iOS 那种半透+模糊的质感。真正磨砂（frosted glass）的核心是两件事：**局部背景模糊 + 半透明遮罩**，而 background-blend-mode 不处理模糊，也不感知背后真实内容，纯属静态混合，别走这条路。
backdrop-filter: blur() 是唯一靠谱方案
现代浏览器（Chrome 76+、Firefox 103+、Safari 9+）支持 backdrop-filter: blur(12px)，它会直接对元素「背后」的页面内容做高斯模糊，再叠加 background-color: rgba(255,255,255,0.1) 这类低不透明度色值，就能模拟出系统级磨砂感。关键点：
-
backdrop-filter必须作用在有透明/半透明背景的元素上，纯白色background: white会挡住背后内容，blur 就失效 - 父容器不能有
overflow: hidden，否则裁剪区域外的内容无法被 backdrop 捕获（常见于 modal、header 容器） - Safari 对
backdrop-filter的硬件加速更敏感，blur 值建议控制在8px–16px之间，过大易卡顿 - 不支持时的降级方案只能是纯
rgba()背景，别硬套filter: blur()—— 那是模糊自身，不是背景
兼容性兜底：用 @supports 切换样式
不能靠 UA 判断，得用特性检测。下面这段 CSS 可直接复用：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
.frosted {
background-color: rgba(255, 255, 255, 0.1);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
}
@supports not (backdrop-filter: blur(1px)) {
.frosted {
background-color: rgba(255, 255, 255, 0.4);
/* 不加 blur，但保留一点透感 */
}
}
注意：Firefox 直接支持标准语法，无需 -moz-；Safari 旧版需 -webkit-backdrop-filter，但当前主流版本已支持无前缀写法。
移动端真机调试常被忽略的坑
开发时在桌面 Chrome 看着完美，一上 iPhone 就发灰、变实、甚至整个元素消失。原因很实际：
- iOS Safari 默认关闭 backdrop-filter 的硬件加速，如果父元素用了
transform: translateZ(0)或will-change: transform，反而可能触发渲染异常 - 部分安卓 WebView（尤其微信内置）完全不支持
backdrop-filter，且不触发@supports，得靠 JS 检测：if ('backdropFilter' in document.documentElement.style) - 高度动态内容（比如滚动中实时更新的卡片）叠加 backdrop-filter，容易触发重绘抖动，建议加
contain: style layout限制影响范围
磨砂不是加个 blur 就完事，它是视觉层、渲染层、设备能力三者咬合的结果。blur 值调太小看不出效果，调太大在低端机直接卡死——没有银弹，只有实测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
