CSS的filter属性

MEANING

filter 属性用于为元素添加图形效果或滤镜效果。通过设置不同的 filter 值，可以实现元素模糊、透明、提高对比度等多种视觉效果。

https://codepen.io/Zhaojjjjjj/pen/RweqMbW

BASIC

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

其中 <filter-function> 表示一个滤镜函数，该函数实现了一种特定的图形处理效果。目前常见的滤镜函数包括：

• blur()：模糊效果；
• brightness()：亮度调节；
• contrast()：对比度调节；
• grayscale()：灰度转换；
• hue-rotate()：色相旋转；
• invert()：颜色反转；
• opacity()：透明度调节；
• saturate()：饱和度调节；
• sepia()：棕褐色转换；

此外还有其他一些滤镜函数，如 drop-shadow() 可用于添加投影效果、url() 可用于加载 SVG 或其他 web 图形资源，具体使用时需要根据实际情况进行选择。

在应用多个滤镜函数时，可以使用空格分隔多个函数，它们将按顺序依次叠加，以生成最终的滤镜效果。

需要注意的是，CSS 中的 filter 属性并不是所有浏览器都支持的，且在早期浏览器中可能会出现兼容性问题。在使用 filter 属性时应对其兼容性进行测试和处理。

EXAMPLE

1.添加模糊效果

.blur {
  filter: blur(5px);
}

.blur 元素添加一个包含 5 像素模糊半径的模糊效果。

2.调节亮度与对比度

.adjust {
  filter: brightness(150%) contrast(150%);
}

.adjust 元素的亮度和对比度都增加了 50%。

3.设置透明度

.opacity {
  filter: opacity(30%);
}

.opacity 元素的透明度设置为 30%（即变得更加半透明）。

4.添加投影效果

.shadow {
  filter: drop-shadow(10px 10px 5px #888888);
}

.shadow 元素创建一个向右下方偏移 10 像素、水平与竖直方向均扩展 5 像素的深灰色投影效果。

除此之外，还有许常用的滤镜效果可以结合 filter 属性实现。需要注意的是，在使用滤镜效果时应当避免过度使用，以保持页面的可读性和可操作性。