filter

filter 属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。

filter: <filter-function> [<filter-function> ...];

可以叠加多个滤镜，从左到右依次生效。

img {
  filter: grayscale(100%) blur(4px);
}

blur 模糊

高斯模糊

filter: blur(5px);

• 参数必须是长度单位（px、em）
• 不支持 %

常见用途： 👉 骨架屏、弹窗背景虚化、图片加载占位

brightness 灰度

filter: brightness(1.2);

contrast 对比度

filter: contrast(150%);

grayscale 灰度

filter: grayscale(100%);

0%：原图

100%：完全灰度