filter 多函数需空格分隔且顺序合理，如 blur(1px) contrast(1.2) brightness(0.9)；须规避父容器 overflow: hidden 裁剪、未触发硬件加速、跨域限制及高耗组合导致的渲染降级或颜色异常。
直接用 filter 属性空格分隔多个函数就行，但顺序错、父容器剪裁、硬件加速没开，效果就全白搭。
filter 多个函数怎么写才不被覆盖或失效
浏览器原生支持空格分隔的多滤镜组合，不是靠 class 切换或嵌套 div。关键在写法干净、避免字符串拼接：
-
filter: blur(1px) contrast(1.2) brightness(0.9)是合法且推荐的写法； - 千万别用
el.style.filter += ' grayscale(50%)'—— 容易漏空格、重复单位、覆盖原有值； - 想动态开关某项（比如加噪点），用 CSS 自定义属性更稳：
--noise: url(#noise);，再通过filter: ... var(--noise);注入； - 空的
var(--missing)会被忽略，不会报错，但url(var(--u))在 Safari 和旧 Chrome 中可能不生效。
为什么加了 filter 却看不见 blur 或 drop-shadow
不是代码没生效，是渲染区域被悄悄截断了：
- 父容器有
overflow: hidden时，blur(2px)或drop-shadow(0 0 8px #000)溢出部分直接被裁掉——哪怕只多 1px； - 加了
transform: scale(1)、will-change: transform或opacity: 0.99，会触发层叠上下文，导致filter只作用于子元素渲染结果，而非整个视觉输出； - 图片跨域但没配 CORS，
filter显示正常，但后续若用canvas读取像素会抛SecurityError，排查时容易误判为滤镜问题。
哪些组合会导致卡顿或颜色异常
高开销函数叠加不是“效果更强”，而是渲染管线被迫降级：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
-
blur(3px) drop-shadow(0 0 10px rgba(0,0,0,0.5))在 iOS Safari 上常出现阴影发虚或消失； -
hue-rotate(90deg) saturate(2) invert(1)在 Chrome 90 之前可能因颜色计算溢出变纯黑； - 同时动画
blur()和hue-rotate()极易掉帧——两者都是像素重采样密集型操作； - 超过 3 个高耗函数（
blur、drop-shadow、contrast）叠加，尤其在移动端，大概率触发软件渲染，Paint flashing 会整屏闪绿。
hover 动画卡顿，JS 没问题，是 GPU 没接管
直接写 transition: filter 0.3s 很危险，尤其在列表页大量图片场景：
- 加
will-change: filter必须在 hover 触发前设置（比如用:hover伪类里声明），不能常驻，否则长期占用 GPU 资源； - 更稳妥的是用
transform: translateZ(0)强制升层，让滤镜走 GPU 渲染通路； - 测试时打开 Chrome DevTools → Rendering → 勾选 “Paint flashing”，如果 hover 时大片绿色持续闪，说明正在软件渲染回退；
- 慎用
blur()开头的链式组合做动画——模糊后的图像再调色，噪点和边缘锯齿会被放大，观感反而更差。
真正难的不是写出多个 filter，而是判断 blur 是否被裁、动画是否真走 GPU、旧浏览器用户看到的是空白还是降级色块——这些细节不验证，上线后第一波反馈就是“滤镜没反应”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
