filter生效需触发独立渲染层，避免父元素transform干扰；fixed元素慎用；动态值须用calc()；性能差时用backdrop-filter替代，且safari需半透背景+无overflow:hidden。
filter 属性怎么写才生效
直接写 filter: blur(2px) 没问题，但常见失效是因为元素没“触发渲染层”——比如父容器用了 transform: translateZ(0) 或 will-change: transform，反而让子元素的 filter 被截断。更隐蔽的是：filter 对 position: fixed 元素在某些 Safari 版本中完全不生效。
实操建议：
- 优先给目标元素加
transform: translateZ(0)（不是父元素），强制创建独立图层 - 避免在
fixed或sticky定位元素上直接用filter，改用包裹一层div并对其应用 - 动画中慎用
filter+opacity组合，部分 Android WebView 会闪烁或跳帧
用 CSS 自定义属性控制 filter 动态值
不能直接写 filter: blur(var(--blur, 0px)) 就完事——CSS 函数不支持变量插值到函数参数里，必须靠 calc() 或预设值映射绕过。
实操建议：
- 用
filter: blur(calc(var(--blur, 0) * 1px))是可行的，但只适用于单位一致的数值（如 px、deg） - 混合多个滤镜时，不要写
filter: var(--all-filters)，CSS 不允许变量展开为函数列表；应拆成filter: blur(var(--b)) contrast(var(--c)) brightness(var(--br)) - 想实现“开关式”切换（比如灰度开/关），用
filter: grayscale(calc(var(--gray, 0) * 100%))，配合 JS 切换--gray: 0/--gray: 1
filter 性能卡顿的典型场景和解法
filter 看似轻量，但 blur() 和 drop-shadow() 会触发全区域重绘，滚动中尤其明显。Chrome DevTools 的“Rendering”面板勾选“Paint flashing”能一眼看出哪些区域在疯狂重绘。
实操建议：
- 避免对
width: 100vw的全屏背景图用blur(10px)，改成小范围裁剪后模糊再平铺 - 动画中用
filter，务必搭配will-change: filter，但仅限动画开始前设置，动画结束后记得移除（否则持续占 GPU 内存） - 移动端优先考虑用
backdrop-filter替代filter做毛玻璃效果——它只处理背后内容，性能好得多，且支持var(--blur)直接绑定
backdrop-filter 在 iOS 上不生效怎么办
不是 bug，是 Safari 的硬性限制：必须满足两个条件才启用 backdrop-filter：background-color 半透明（哪怕 rgba(0,0,0,0.01)），且父容器不能有 overflow: hidden。
实操建议：
- 检查是否写了
background: transparent——这不行，必须显式带 alpha 值，例如background: rgba(255, 255, 255, 0.8) - 父级如果有
border-radius又想圆角内生效，不能靠overflow: hidden裁剪，改用mask-image: radial-gradient(...)模拟 - iOS 15.4+ 才支持
backdrop-filter在iframe内使用，老版本只能降级为纯色遮罩
自定义属性本身不触发重排，但 filter 的计算和绘制开销藏得很深；最常被忽略的是 backdrop-filter 的透明背景依赖和 Safari 对 overflow 的敏感——调通了，就只是加一行 rgba；没调通，可能花半天怀疑是变量没传进去。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
