应根据模糊目标和目的选择 filter: blur() 或 backdrop-filter：前者模糊整个元素及其子树，适合整页弱化；后者仅模糊背景，实现毛玻璃效果，需配合半透背景、可见父背景及圆角裁剪，且注意兼容性与性能限制。
直接用 filter: blur() 就能模糊任意 HTML 元素，但不是所有场景都适用——文字糊了就看不清，图片糊了可能失真，容器糊了会连子元素一起糊。关键得看你要模糊「什么」，以及「为什么糊」。
blur() 作用对象是整个渲染盒，不是背景
很多人一上来就给卡片容器加 filter: blur(8px)，结果发现文字、按钮全糊了。这是因为 filter 会对该元素及其所有后代内容做整体高斯模糊，相当于把整个 DOM 子树拍成一张图再糊。
- 适合场景：临时悬停弱化整张海报、禁用状态下的图标组、视频封面预览图
- 不适合场景：模态框、信息卡片、需要保持文字可读的 UI 容器
- 如果必须模糊容器又想保文字清晰，只能把文字提到父级，结构变复杂且易漏掉 focus 状态等交互逻辑
- 注意：
filter会创建新的层叠上下文和包含块，可能意外影响position: fixed或z-index行为
想模糊背景而不是内容？用 backdrop-filter
要实现“毛玻璃”效果——背景糊、文字清——必须用 backdrop-filter，它只模糊元素「背后」的内容，不碰自己和子元素。
- 三要素缺一不可：父容器有可见背景（如
background-image或video），当前元素设半透明背景（如rgba(255,255,255,0.7)），加上backdrop-filter: blur(10px) - Safari 必须加
-webkit-backdrop-filter前缀，否则静默失效 -
border-radius或overflow: hidden得配上，否则模糊会从圆角边缘“溢出”，尤其在 Safari 中明显 - 别在
iframe或video上直接用——iOS 和部分安卓 WebView 支持不稳定，fallback 方案得用伪元素模拟
blur 值不是越大越好，12px 是性能分水岭
模糊半径超过 12px 后，低端 Android 和 iOS 设备容易掉帧，滚动或 hover 动画时尤其明显。这不是渲染精度问题，而是 GPU 处理大核高斯卷积的硬件限制。
- 常用范围：背景虚化用
blur(6px)–blur(10px)，轻量过渡用blur(2px)–blur(4px) - 超过
16px在中端机上就可能卡顿，20px+基本不建议上线 - 模糊值变化时别直接用 CSS transition，容易触发重绘；改用
will-change: filter预提示，或对动画元素单独设transform: translateZ(0) - 移动端慎用
filter+scroll组合，某些安卓 WebView 会把模糊当成全局合成开关，导致整个页面发虚
真正难的不是写那行 blur(8px)，而是判断该不该糊、糊哪一层、糊多狠——尤其当设计稿里写着“高级毛玻璃”却没说明运行环境时，得先查目标设备的 backdrop-filter 支持率，再决定要不要切到伪元素 fallback，而不是无脑堆参数。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
