css filter

/* 示例代码：使用 CSS filter 属性 */

/* 1. 模糊效果 */
.blur {
  filter: blur(5px); /* 将元素模糊处理，值越大越模糊 */
}

/* 2. 灰度效果 */
.grayscale {
  filter: grayscale(100%); /* 将元素转换为灰度图像，100% 表示完全灰度 */
}

/* 3. 亮度调整 */
.brightness {
  filter: brightness(150%); /* 增加元素的亮度，100% 表示原始亮度 */
}

/* 4. 对比度调整 */
.contrast {
  filter: contrast(200%); /* 增加元素的对比度，100% 表示原始对比度 */
}

/* 5. 颜色反转 */
.invert {
  filter: invert(100%); /* 反转元素的颜色，100% 表示完全反转 */
}

/* 6. 饱和度调整 */
.saturate {
  filter: saturate(300%); /* 增加元素的饱和度，100% 表示原始饱和度 */
}

/* 7. 色调旋转 */
.hue-rotate {
  filter: hue-rotate(90deg); /* 旋转元素的色调，单位为度 */
}

/* 8. 使用多个滤镜 */
.multiple-filters {
  filter: grayscale(50%) blur(3px) opacity(70%); /* 同时应用多个滤镜效果 */
}

解释说明：

• filter 是 CSS 中用于对元素进行视觉效果处理的属性。
• 上面的代码展示了几种常见的滤镜效果，如模糊、灰度、亮度、对比度、颜色反转、饱和度调整、色调旋转等。
• 还可以同时应用多个滤镜效果，通过空格分隔不同的滤镜规则。