必须同时写 -webkit-filter 和 filter 以兼容旧版浏览器，grayscale() 参数范围为0–1或0%–100%，blur() 必须带单位，多滤镜注意执行顺序，backdrop-filter 不适用于 img，filter 可能引发渲染问题需配合 transform: translateZ(0)。
直接用 filter 就行，但必须注意浏览器兼容性和性能开销——不是所有滤镜在所有场景下都“开箱即用”。
给图片加黑白（grayscale）要写两遍声明
现代浏览器支持 filter: grayscale(100%)，但 Safari 15.4 之前、旧版 Chrome 和 Opera 还得靠 -webkit-filter 兜底。只写一个会掉样式。
- 必须同时写：
img { -webkit-filter: grayscale(100%); filter: grayscale(100%); } -
grayscale()参数接受0到1的小数，或0%到100%的百分比，0是原色，1是全灰 - 别用
grayscale(2)这种超范围值——它会被当成无效，整个filter声明失效，图片恢复原样 - IE 完全不支持，
filter属性在 IE 中是另一个已被废弃的非标准实现，不能混用
模糊（blur）参数单位必须是长度值
blur() 不接受纯数字，必须带单位（px、em、rem），否则解析失败，滤镜不生效。
- 正确写法：
filter: blur(3px)，filter: blur(0.5em) - 错误写法：
filter: blur(3)（无单位）、filter: blur(100%)（百分比不合法） - 数值越大越模糊，但超过
10px后性能下降明显，尤其在移动端滚动时容易卡顿 - 如果和
transition搭配（比如 hover 变模糊），建议只对filter做过渡：transition: filter 0.3s ease，别加其他属性，否则触发重排
多个滤镜叠加时顺序很关键
filter 是函数列表，从左到右依次执行，顺序不同结果可能完全不同。
- 比如
filter: brightness(1.2) blur(2px)先提亮再模糊；反过来blur(2px) brightness(1.2)是先模糊再提亮，噪点更明显 - 灰度 + 模糊常见组合：
filter: grayscale(100%) blur(1px)，适合做背景图弱化处理 - 不要叠加太多函数（如超过 4 个），部分低端 Android WebView 会直接忽略整个声明
- 调试时可临时拆开单个使用，确认每个函数是否生效，再合并
backdrop-filter 和 filter 容易混淆但用途完全不同
backdrop-filter 作用于元素「背后的内容」，不是元素自身；filter 才作用于当前元素（比如 img）。想给图片本身加黑白或模糊，只能用 filter。
-
backdrop-filter: blur(5px)适用于毛玻璃效果，需配合background-color: rgba()和透明区域才能看见效果 -
backdrop-filter在 iOS Safari 9+、Chrome 76+ 支持较好，但 Firefox 默认禁用，需手动开启layout.css.backdrop-filter.enabled - 对
img标签用backdrop-filter是无效的——它背后没内容可滤
最常被忽略的一点：滤镜会强制浏览器启用硬件加速，但也会让元素脱离普通文档流的绘制上下文。如果图片在 position: fixed 或动画中频繁变化，filter 可能引发闪烁或渲染错位，此时应加 transform: translateZ(0) 强制新建图层，而不是盲目堆叠滤镜函数。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
