CSS3 filter(滤镜) 属性

CSS 属性 filter 用于对元素进行图形效果处理，如模糊、灰度、对比度等。通过 filter 属性，我们可以实现一些炫酷的视觉效果，提升用户体验。

语法

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

• none：默认值，无效果。
• blur(value)：给元素添加高斯模糊效果，值越大效果越明显。
• brightness(value)：调整元素的亮度，值为正数增加亮度，负数减少亮度。
• contrast(value)：调整元素的对比度，值为正数增加对比度，负数减少对比度。
• drop-shadow()：给元素添加阴影效果，可设置阴影的颜色、水平偏移、垂直偏移、模糊半径。
• grayscale(value)：将元素转为灰度，值为 0-100，值越大越接近完全灰度。
• hue-rotate(value)：旋转元素的色相，值为角度，0deg 表示原色。
• invert(value)：反转元素的颜色，值为 0-100，值越大颜色越倒置。
• opacity(value)：调整元素的透明度，值为 0-1，0 表示完全透明，1 表示完全不透明。
• saturate(value)：调整元素的饱和度，值为正数增加饱和度，负数减少饱和度。
• sepia(value)：将元素转为深褐色，值为 0-100，值越大越接近完全褐色。
• url()：指定一个 SVG 滤镜效果。

示例代码

// www.javascriptcn.com code example
/* 模糊效果 */
.blur {
  filter: blur(5px);
}

/* 调整亮度 */
.brightness {
  filter: brightness(1.5);
}

/* 调整对比度 */
.contrast {
  filter: contrast(150%);
}

/* 添加阴影效果 */
.shadow {
  filter: drop-shadow(4px 4px 5px rgba(0, 0, 0, 0.5));
}

/* 转为灰度 */
.grayscale {
  filter: grayscale(50%);
}

/* 旋转色相 */
.hue {
  filter: hue-rotate(90deg);
}

/* 反转颜色 */
.invert {
  filter: invert(100%);
}

/* 调整透明度 */
.opacity {
  filter: opacity(0.5);
}

/* 调整饱和度 */
.saturate {
  filter: saturate(200%);
}

/* 转为褐色 */
.sepia {
  filter: sepia(80%);
}

通过 filter 属性，我们可以为网页元素添加各种视觉效果，提升页面的交互体验。在实际开发中，可以根据需求灵活运用 filter 属性，创造出独特的设计效果。