blur() 高性能需分层降噪避坑：伪元素分层+单位参数（4px～8px最优）+backdrop-filter兜底兼容。
filter: blur() 能快速实现高斯模糊背景，但“高性能”不等于“随便写”，关键在分层、降噪、避坑——直接给 body 或全屏容器加 blur(10px)，页面立刻卡顿甚至白屏。
blur() 参数必须带单位，且不能超过临界值
浏览器只认带单位的长度值：blur(5px) 合法，blur(5) 或 blur(5%) 会被静默忽略。移动端尤其敏感：iOS Safari 在 blur(12px) 以上常降级为低精度模糊，安卓旧 WebView 可能直接跳帧或不渲染。实测多数设备在 blur(4px)～blur(8px) 区间平衡性最佳。
背景模糊必须用伪元素分层，不能直接套在内容容器上
常见错误是把 filter: blur(6px) 写在模态框或卡片的父容器上，结果文字、按钮全糊——因为 filter 模糊的是整个渲染层，不是“背后”。正确做法是：
- 用
::before伪元素创建独立图层，position: fixed+z-index: -1 - 背景图必须显式设在伪元素上，
background-size: cover和background-position: center缺一不可 - 父容器若含
transform或overflow: hidden，伪元素会被裁剪，此时得把伪元素提到html下或改用绝对定位容器
backdrop-filter 更适合毛玻璃效果，但兼容性要手动兜底
如果目标是“背景透出+局部模糊”（如对话框），优先用 backdrop-filter: blur(4px)，它只模糊背后内容，不影响自身元素。但它有三个硬门槛：
- Tailwind 用户必须确认版本 ≥ 3.1，并在
tailwind.config.js的theme.extend.backdropBlur中显式声明映射（如'sm': '4px'），否则构建后 CSS 根本不输出该规则 - 元素自身必须带 alpha 通道背景（如
bg-white/10），纯色背景（bg-white）直接失效 - Safari ≤16.6 和部分 Chrome 需手动加
-webkit-backdrop-filter前缀，仅靠 Tailwind 默认生成的标准属性会黑屏
真正容易被忽略的点是：模糊效果依赖像素采样，背后若被 z-index 遮罩盖住、或父层 overflow: hidden 截断采样区域，滤镜就变成“糊了个寂寞”——连控制台都不会报错，只能靠 DevTools 逐层检查渲染树和图层合成。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
