必须用backdrop-filter实现背景模糊，而非filter：前者仅模糊元素背后内容、保持自身清晰，后者会连同元素自身一并模糊；遮罩层需半透明且与模态框同级定位，safari须加-webkit前缀，blur值建议6–10px以平衡效果与性能。
blur() 背景模糊要配合 backdrop-filter 才生效
单纯给 body 或遮罩层加 filter: blur(8px) 会把整个元素（包括模态框内容）一起模糊，这不是你想要的“背景模糊、内容清晰”效果。真正起作用的是 backdrop-filter，它只对元素「背后」的内容做滤镜处理。
关键点在于：遮罩层必须是半透明的，且不能遮挡模态框自身——所以模态框得放在遮罩层之上，且自身不继承模糊效果。
-
backdrop-filter: blur(10px)必须写在遮罩层（比如一个全屏div.overlay）上 - 遮罩层需设
background-color: rgba(0, 0, 0, 0.5)，透明度不能为 0（否则无背景可模糊） - 模态框本身不能是遮罩层的子元素，否则会被模糊穿透影响；推荐用同级结构或固定定位脱离文档流
- Safari 需加
-webkit-backdrop-filter前缀，Chrome/Firefox 现代版本已原生支持
遮罩层和模态框的 DOM 结构容易写错
常见错误是把模态框包在遮罩层里：<div class="overlay"><div class="modal">...</div></div>。这样 backdrop-filter 会尝试模糊遮罩层背后的页面内容，但模态框作为子元素，视觉上仍可能受渲染层叠影响，尤其在滚动时出现错位或模糊残留。
正确结构是两者并列、都用 position: fixed，靠 z-index 控制层级：
<div class="overlay"></div> <div class="modal">...</div>
-
.overlay：宽高 100vh/100vw，z-index: 999，设backdrop-filter和半透背景 -
.modal：z-index: 1000，确保在遮罩层之上，且自身无filter或backdrop-filter - 两者都加
position: fixed; top: 0; left: 0;，避免因父容器缩放或滚动导致偏移
移动端 Safari 的 backdrop-filter 兼容性坑
iOS 15+ Safari 支持 backdrop-filter，但有个隐藏限制：如果遮罩层没有显式设置 -webkit-backdrop-filter，或者父容器有 overflow: hidden / transform 等合成层触发属性，模糊可能完全不生效或闪烁。
- 务必同时写两行：
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); - 检查遮罩层祖先是否有
transform: translateZ(0)或will-change: transform，这些会干扰 backdrop 渲染层 - 真机测试时，打开 Safari 开发者工具 → Elements → 检查遮罩层 computed styles，确认
backdrop-filter是否被标记为 “invalid” 或 “disabled” - 降级方案：对不支持的浏览器，用纯
rgba()遮罩，不加 blur，避免布局错乱
性能敏感场景下 blur 半径别设太大
blur() 半径超过 12px 后，渲染开销明显上升，尤其在低端 Android 设备或长页面上滚动时，可能出现掉帧或卡顿。这不是 CSS 本身的问题，而是浏览器需要为每个像素重新采样叠加区域。
- 日常使用推荐
blur(6px) ~ blur(10px)，视觉足够柔和，性能损耗可控 - 避免在
:hover或动画中动态修改backdrop-filter值，这会频繁触发重绘 - 如果模态框内含复杂 SVG 或大量文本，建议给遮罩层加
contain: strict，限制浏览器重绘范围 - 不要用
blur()替代图片压缩——背景图本身模糊再叠加 backdrop-filter，只会让性能更差
最常被忽略的是：blur 效果依赖于背后真实内容的渲染完整性。如果遮罩层下面有未加载完的图片、正在动画的组件，或者页面有 visibility: hidden 但仍在 DOM 中的节点，模糊区域可能出现空白或色块。动手前先确保背景内容稳定就绪。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
