backdrop-filter在HTML编辑器中不生效，是因为其运行于iframe或沙箱环境，背景为空白或纯色导致无内容可模糊；需本地HTTP服务、半透背景、正确层叠上下文及浏览器支持（Firefox需手动启用）才能正常工作。
绝大多数 HTML 编辑器（CodePen、JSFiddle、VS Code Live Server 默认配置）里，backdrop-filter 根本不会动——不是你代码错，是环境没给它可模糊的内容。
为什么编辑器里 backdrop-filter 一直不生效
因为编辑器预览区基本都用 iframe 或沙箱容器加载你的 HTML，父页面背景为空白或纯色，backdrop-filter 采样不到任何像素。它不模糊“自己”，只模糊“自己背后的东西”。没有东西可糊，滤镜就静默失效。
- Chrome/Safari 支持
backdrop-filter，但 Firefox 默认关闭（需手动设layout.css.backdrop-filter.enabled = true） - 编辑器如 CodePen 的 “Auto” 模式常给
body加overflow: hidden，直接切断 backdrop 渲染链 - 本地用
file://协议打开 HTML 文件时，Safari/Chrome 也会禁用 backdrop-filter（安全限制）
本地起服务才能真看到模糊效果
绕过编辑器沙箱的唯一可靠方式：用最小化 HTTP 服务跑起来，同时确保 DOM 层级满足三个硬条件。
- 用
python3 -m http.server 8000或npx serve启动，别用双击打开的file:// - 遮罩层必须设
background-color: rgba(255, 255, 255, 0.15)（alpha 必须 - 它的直接父容器得有真实背景内容（比如
background-image、background: linear-gradient(...)，甚至只是带 padding 的色块） - 祖先链里不能出现
overflow: hidden、contain: strict、isolation: isolate
backdrop-filter 必须写的两行 CSS
缺一不可，且顺序不能错——Safari（包括 iOS 微信 X5 内核）只认带前缀的版本。
立即学习“前端免费学习笔记（深入）”；
.overlay {
background-color: rgba(0, 0, 0, 0.3);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border-radius: 12px;
}
-
-webkit-backdrop-filter必须写在backdrop-filter前面，否则 Safari 忽略 -
blur()值建议控制在6px～10px；超过12px在中低端安卓或 iOS 滚动时易卡顿、边缘发虚 - 必须加
border-radius或overflow: hidden，否则 Safari 会把模糊渲染到圆角外，出现硬边
按钮控制显示/隐藏时最常踩的坑
动态切换遮罩层，重点不在“怎么切”，而在“怎么防穿透+保重绘”。iOS Safari 尤其敏感。
- 遮罩层要设
pointer-events: none，内部弹窗区域设pointer-events: auto，否则关不了 - 点击事件监听必须用
e.target === overlayEl判断，避免点弹窗内容时误关 - 首次显示前加
will-change: filter，隐藏后立刻移除，能缓解 iOS 白屏/闪烁 - 别在
scroll事件里 toggle 遮罩层——iOS Safari 对滚动中 backdrop-filter 合成优化极差
真正难的不是写那几行 CSS，而是让整个渲染链不断：从背景图存在、到父容器不截断、再到浏览器允许采样、最后是移动端不抖。漏掉任意一环，模糊就停在半路。
