backdrop-filter 实现动态模糊遮罩需配合 position: fixed、rgba 背景色及 pointer-events 控制，chrome/safari/edge 111+ 原生支持，firefox 需手动启用；注意事件穿透、ios 渲染抖动（加 will-change: filter）及兼容性降级策略。
直接用 backdrop-filter + position: fixed 就能实现动态模糊遮罩，但必须注意浏览器兼容性和事件穿透问题——不是所有“模糊”都真能模糊背后内容。
blur 遮罩层必须用 backdrop-filter，不能靠 filter 或 opacity
很多人误以为给遮罩层加 filter: blur(8px) 就能模糊背景，实际它只模糊自身（比如遮罩层里的文字），对下方页面毫无影响。真正起作用的是 backdrop-filter，它专为“透过该元素看背景时做滤镜”而设计。
-
backdrop-filter: blur(10px)才能模糊遮罩层后的真实页面内容 - 必须配合
background-color: rgba(0,0,0,0.4)（带透明度）才可见效果；纯 transparent 或完全不设 background 会导致滤镜失效 - Chrome / Safari / Edge 111+ 原生支持；Firefox 默认关闭，需用户手动启用
layout.css.backdrop-filter.enabled（开发阶段可提醒，生产环境不能依赖）
按钮控制显示/隐藏时，DOM 结构和事件绑定要防穿透
点击遮罩层本身关闭，但不能让点击穿透到下层按钮或链接——这是最常出 bug 的地方。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 遮罩层容器必须设
pointer-events: auto（默认就是，但显式写上更安全） - 内部弹窗（如提示框）需设
pointer-events: auto，否则无法点击关闭按钮 - 遮罩层的
click事件监听必须用e.target === overlayEl判断，避免点到弹窗内部时误关 - 示例逻辑：
overlayBtn.addEventListener('click', () => { overlayEl.style.display = 'block'; });<br>overlayEl.addEventListener('click', (e) => {<br> if (e.target === overlayEl) {<br> overlayEl.style.display = 'none';<br> }<br>});
移动端 Safari 的 backdrop-filter 有渲染抖动，需加 will-change: filter
在 iOS 16.4+ 上，首次触发模糊遮罩时可能出现半秒白屏或闪烁，本质是渲染管线未预热。
- 给遮罩层加
will-change: filter可提前提示浏览器准备硬件加速 - 但不要长期保留该样式——它会持续占用 GPU 资源，应在显示前加、隐藏后移除
- 推荐写法：
function showOverlay() {<br> overlayEl.style.willChange = 'filter';<br> overlayEl.style.display = 'block';<br> setTimeout(() => {<br> overlayEl.style.willChange = 'auto';<br> }, 100);<br>}
真正难的不是写几行 CSS，而是判断什么时候该用 backdrop-filter、什么时候退回到纯色遮罩加动画过渡——尤其当目标用户包含大量 Firefox 或旧版 Android WebView 时。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
