filter 的 blur、grayscale、sepia 等是可调参数的非开关式图像处理操作，支持叠加与顺序依赖，不继承，现代浏览器稳定支持（ie 除外）；blur(2px)–blur(6px) 平衡效果与性能；背景毛玻璃需用 backdrop-filter；grayscale/sepia 推荐统一用百分比写法；滤镜顺序影响结果，应按模糊→色彩调整→色调→透明度排列；overflow: hidden 和 svg 兼容性是常见失效原因。
直接说结论： filter 的 blur、grayscale、sepia 等函数不是“开关式”效果，而是可调参数的图像处理操作；它们能叠加、有顺序依赖、不继承，且在现代浏览器中已稳定支持（IE 全系除外）。
blur() 模糊值怎么设才不卡又有效果
模糊半径用 px 单位，但数值不是越大越好：超过 10px 后性能下降明显，尤其在移动端或含大量图片的页面。实际项目中，blur(2px) 到 blur(6px) 是虚化背景最常用区间。
- 背景毛玻璃必须配合
backdrop-filter，不能只靠filter: blur()—— 后者会模糊整个元素（含文字、按钮），而前者只作用于背景层 -
blur(0)是合法值，常用于:hover过渡：比如img { filter: blur(4px); } img:hover { filter: blur(0); } - 避免对
video或滚动区域频繁应用blur()，容易触发重绘瓶颈
grayscale() 和 sepia() 的百分比与数字混用问题
grayscale() 和 sepia() 都接受 0%～100% 或 0～1 的数值，但写法不统一容易出错。例如：grayscale(1) 和 grayscale(100%) 效果相同，但 grayscale(50) 是无效语法（缺单位或百分号）。
- 推荐统一用百分比写法，避免和
brightness(1.2)这类小数混淆 -
sepia(100%)不是棕褐色“开关”，而是完全转换；sepia(30%)是部分叠加，适合做柔和怀旧感 - 两者都支持动画，但
transition: filter 0.3s必须写在基础状态上（hover 状态无需重复声明）
多个滤镜组合时顺序为什么不能乱
滤镜按空格分隔，从左到右依次执行。比如 filter: blur(3px) grayscale(100%) 是先模糊再转灰度；反过来写成 grayscale(100%) blur(3px)，结果视觉上几乎看不出模糊——因为灰度后高频细节已丢失，高斯模糊作用对象变“平”了。
- 通用顺序建议：模糊 → 色彩调整（
brightness/contrast）→ 色调类（hue-rotate/sepia）→ 透明度（opacity） -
drop-shadow()是唯一带坐标参数的滤镜，它不参与图像像素运算，而是生成投影层，放在最后不影响前面效果 - 调试时可用浏览器 DevTools 实时拖动参数，观察顺序变化带来的差异
哪些场景下 filter 会意外失效
最常见的是父容器设置了 overflow: hidden 且子元素用了 blur()：模糊溢出部分会被裁剪，看起来像“模糊变弱”。另一个是 SVG 元素默认不支持 filter（需显式加 filter: url(#myFilter) 或用 CSS 层叠）。
-
filter不继承，所以给div设置了grayscale(100%)，里面的img不会自动变灰，得单独加 - 使用
will-change: filter可提前提示渲染引擎优化，但仅在动画频繁时启用，否则反而增加内存开销 - SSR 渲染中若服务端未注入初始
filter值，首屏可能闪动，建议用内联 style 或 JS 同步控制
真正难的不是记住每个函数的参数，而是判断什么时候该用 filter，什么时候该换 backdrop-filter、svg filter 或预处理图片——这取决于你要模糊的是内容本身，还是它背后的东西。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
