css filter: blur() 仅近似高斯模糊，不支持局部控制、性能敏感，且参数须为带单位长度值；错误用法包括无单位/百分比、未加载图片提前应用、移动端降级、动画中频繁修改及全屏直接应用等。
直接用 filter: blur() 就能加高斯模糊，但必须注意它只是近似模拟、不能局部控制、且对性能敏感——不是所有“模糊需求”都适合它。
blur() 的参数和常见错误现象
blur() 只接受长度单位（如 px），不支持百分比或无单位数字。写成 filter: blur(5) 或 filter: blur(5%) 都会失效，浏览器直接忽略该声明。
- 典型错误：给未加载完成的
<img>提前加filter: blur(4px)，结果首屏闪一下才模糊——因为 filter 作用于渲染后的像素，资源未就绪时无像素可处理 - 移动端尤其明显：iOS Safari 在
blur(12px)以上可能降级为低精度模糊，甚至跳帧；安卓部分 WebView（如旧版 UC）压根不支持伪元素上的filter - 别在动画中频繁改
style.filter，比如用 JS 每帧设element.style.filter = 'blur(' + i + 'px)'，这会强制重绘整层，卡顿明显
全屏背景模糊必须用 ::before 伪元素分层
直接给 或 加 filter: blur(10px)，整个页面文字、按钮、输入框全糊掉——这不是背景模糊，是废操作。
- 正确做法是用
body::before创建独立图层：position: fixed+width: 100vw+height: 100vh+z-index: -1 - 背景图必须设在伪元素上，不能靠继承；
background-size: cover和background-position: center要显式写，否则可能拉伸或偏移 - 如果父容器有
transform或overflow: hidden，::before可能被裁剪，此时得把伪元素提到上或改用绝对定位容器
多个滤镜组合时顺序影响最终效果
filter 函数按从左到右顺序执行，先模糊再调色和先调色再模糊结果不同。比如 blur(2px) brightness(1.2) 是对模糊后图像提亮；反过来则可能让噪点更刺眼。
- 推荐通用顺序：
blur()→grayscale()/saturate()→brightness()/contrast()→opacity() - 悬停清除模糊要写
filter: blur(0)，别漏掉单位，blur(0px)才是有效值；filter: none会清空所有滤镜，包括你可能想保留的grayscale() - 禁用按钮灰度显示建议组合：
filter: grayscale(100%) brightness(80%) opacity(70%)，单用grayscale()容易显得脏
什么时候不该用 filter: blur()
它解决不了三类问题：局部模糊（比如只糊人脸）、导出模糊后图片、动态区域模糊（如跟随鼠标移动的模糊圈）。这些场景 Canvas 手动实现或 WebAssembly 加速才是正解。
- CSS
blur()无法响应图片内容变化——视频帧、Canvas 动画、SVG 图形更新时，浏览器不会智能重绘模糊层，容易出现残影或糊错位置 - 需要精确控制标准差（σ）或卷积核大小？CSS 不暴露这些参数，
blur(5px)对应多少 σ 全看浏览器实现，Chrome 和 Safari 结果就有差异 - 做图像编辑器、截图工具、AI 生成图预览等产品级功能，别硬扛 CSS 模糊，Canvas getImageData + 高斯算法或 WASM 模块更可控
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
