css Filter支持空格分隔的多滤镜叠加，按从左到右顺序执行，如blur(2px) contrast(1.3) brightness(0.9)；避免滥用drop-shadow与blur组合、慎用超3个高耗函数，优先用CSS变量动态控制，注意层叠上下文与渲染区域扩展问题。
filter 属性本身支持多滤镜叠加，无需额外包装
html5 中的 filter 不是只能用一个效果——它原生支持空格分隔的多个函数组合，浏览器会按从左到右顺序依次执行。比如 filter: blur(2px) contrast(1.3) brightness(0.9) 是合法且高效的写法，不需要套多层
常见错误是误以为必须像 CSS 动画那样拆成多个 class 分别控制，结果导致重排或性能下降；也有人试图用 filter: url(#myFilter) 引用 SVG 滤镜来“叠加”，反而绕远路且兼容性差（safari 对 SVG filter 支持不稳定）。
-
blur()、contrast()、brightness()、grayscale()、sepia()等函数可直接并列书写 - 顺序影响最终视觉结果：先模糊再调对比度，和先调对比度再模糊，效果不同
- 避免在动画中频繁修改整个
filter字符串，应只更新变化的参数（如用transform+ 单独filter变量更利于 GPU 加速）
哪些滤镜组合会导致渲染异常或性能骤降
不是所有组合都安全。部分函数在某些浏览器（尤其是旧版 edge 和 Safari 15.4 之前）中叠加后会触发软件渲染，帧率明显下滑，甚至出现色偏或裁剪丢失。
典型高危组合包括：filter: blur(3px) drop-shadow(0 0 10px rgba(0,0,0,0.5)) —— 这个在 Safari 上容易让阴影边缘发虚或消失；filter: hue-rotate(90deg) saturate(2) invert(1) 在 chrome 低版本中可能颜色计算溢出，显示为纯黑或灰块。
立即学习“前端免费学习笔记（深入）”；
- 慎用超过 3 个耗性能函数（特别是
blur()和drop-shadow()），它们会强制开启离屏渲染 -
url()引用的 SVG 滤镜不推荐用于动态叠加，调试困难且无法被 CSS 自定义属性控制 - 移动端 ios Safari 对
filter的硬件加速支持有限，叠加后滑动卡顿明显时，优先考虑用 canvas 或 webgl 替代
用 CSS 自定义属性动态控制多滤镜中的某一项
想实时开关某个效果（比如点击切换是否加噪点），不用 js 拼字符串或切 class，直接用 CSS 变量更干净。
例如定义：
:root { --noise: ""; } .my-element { filter: blur(1px) contrast(1.1) var(--noise); } 然后 JS 改变 --noise 值：el.style.setProperty('--noise', 'url(#noise-filter)') 或清空为 ''。注意：空值会被忽略，不会报错。
- 变量不能放在函数内部（如
blur(var(--b))可以，但url(var(--u))在部分浏览器不生效） - 使用
var(--f, blur(0))提供默认值，防止变量未定义时整个filter失效 - 不要用
calc()包裹多个滤镜函数，语法不支持
filter 与 transform、opacity 混合时的层叠陷阱
当元素同时有 filter、transform 和 opacity，浏览器会自动创建新的层叠上下文（stacking context），这可能导致 z-index 失效、遮罩错位或 backdrop-filter 被截断。
尤其在模态框、下拉菜单等需要精确层级控制的场景中，叠加 filter: brightness(0.8) 后，原本在顶层的按钮可能被其他绝对定位元素盖住——不是 z-index 设得不够高，而是它已不在同一层叠上下文中。
- 检查是否意外触发了新层叠上下文：用 DevTools 的 Layers 面板看是否有“Filter”标记的独立图层
- 若只需局部变暗，优先用
background: rgba(0,0,0,0.2)而非filter: brightness(0.8)，避免副作用 -
backdrop-filter和filter同时存在时，后者会作用于前者所“捕获”的背景区域，容易造成双重模糊或对比度崩坏
实际项目里最常被忽略的是：滤镜叠加后，元素尺寸没变，但渲染区域扩大了（比如 blur(4px) 会让有效绘制区域向外扩展 4px），如果父容器设置了 overflow: hidden，就可能把阴影或光晕裁掉——这个得靠 padding 或负 margin 补偿，而不是调滤镜参数。