正确使用 transition 与 filter: blur() 可实现流畅模糊动画，需初始化 filter、避免 display: none、统一 filter 值，并通过硬件加速和范围限制提升性能，适用于背景虚化等场景。
button点击切换filter值，不是改class而是动态写style.filter
直接用element.classList.toggle()切预设class在真实项目里容易失控——比如多个按钮共用一张图、或需要连续调节模糊度时，class方案没法表达“blur(3.2px)”这种浮点精度。必须用JS实时拼接style.filter字符串。
关键点：每次更新都要重生成完整字符串，别用+=追加。例如当前是sepia(0.5) brightness(1.1)，再加blur不能写el.style.filter += ' blur(2px)'，得先读出原值、解析、插入新项、再拼回去——太重。更简单的是维护一个对象：
const filters = {
blur: '0px',
brightness: '1',
contrast: '1'
};
function updateFilter() {
el.style.filter = `blur(${filters.blur}) brightness(${filters.brightness}) contrast(${filters.contrast})`;
}
点击按钮时只改对应字段，再调updateFilter()。这样顺序可控、单位不丢、空格不漏。
blur()参数必须带px单位，且不能为0或负数
blur()只接受带单位的长度值，blur(5)、blur(5%)、blur(-2px)全无效，浏览器直接跳过该函数。常见错误是把range滑块的value当成了px值，但没加单位：
- range的
value是字符串，比如"0"或"8"，拼进filter前必须手动加"px" - 值为0时写
blur(0px)合法，但blur(0)不合法 - 移动端iOS Safari在
blur(12px)以上可能降级为低精度模糊，建议上限设为10px并用@media (-webkit-min-device-pixel-ratio: 2)微调
父容器overflow:hidden会悄悄裁掉blur溢出像素
点了按钮发现图片没变模糊？大概率不是JS没执行，而是父容器设置了overflow: hidden。哪怕只溢出0.3px，也会被硬裁，看起来像“没生效”或“边缘发黑”。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
解决办法只有两个：
- 给图片加
margin（如margin: 0 -4px），让模糊区域有空间展开 - 把父容器
overflow改成visible，或干脆移除该声明
注意：transform: scale(1)、will-change: transform也会触发层叠上下文，间接导致filter作用范围缩小——这类属性要慎加。
高清/模糊切换要防闪屏，初始化和过渡都得处理
页面加载后立刻点按钮，有时会看到图片先清晰再模糊，那是图片还没加载完就应用了filter。因为filter作用于渲染后的像素，资源未就绪时无像素可处理。
稳妥做法：
- 监听
img.onload后再启用控制按钮 - 给
transition: filter 0.2s ease，但别写在常态样式里——长期挂will-change: filter会持续占用GPU - hover动画卡顿？打开Chrome DevTools → Rendering → 勾选“Paint flashing”，绿色大片闪说明在软件渲染，此时加
transform: translateZ(0)升层比单纯加transition更有效
真正难的不是写出来，是让blur(0.3px)在iPhone和Windows笔记本上观感一致——DPR差异会让同一段CSS产生不同物理模糊量，这点常被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
