滤镜（filter）可改造元素的视觉呈现，CSS内置的滤镜有10种，通过SVG文件还能自定义滤镜。

一、调色滤镜

调色滤镜可控制元素的模糊、颜色、亮度等变化，并且多个滤镜可组合在一起使用。这些滤镜大部分既能接收百分数，也能接收数值。当传入的值大于上限值时，会以上限值来处理。
1）模糊
blur()滤镜会对元素进行高斯模糊的处理，它能接收一个模糊半径的长度值。注意，不能向其传递负数。在下图中，右侧是调用了blur()滤镜后的效果。

  1. div {
  2.   filter: blur(5px);
  3. }

image.png
2）透明
opacity()滤镜可控制元素的透明度，其默认值为1或100%（表示不透明），最小值为0。opacity()滤镜与opacity属性类似，但两者不是互斥关系，可同时应用于同一个元素，不过opacity属性会在执行完所有的滤镜后再起作用。在下图中，右侧是调用了opacity()滤镜后的效果。

  1. div {
  2.   filter: opacity(.5);
  3. }

image.png
3）阴影
drop-shadow()滤镜可为元素的透明部分提供阴影，其取值与text-shadow属性类似，也是X轴与Y轴的偏移、模糊半径以及颜色。下图使用了一张透明的五角星图，右侧调用了drop-shadow()滤镜，阴影会沿着透明轮廓渲染。

  1. div {
  2.   filter: drop-shadow(5px 5px 5px #F60);
  3. }

image.png
4）灰度
grayscale()滤镜能转换元素的灰度，当值为1或100%时，元素会转换成完全的灰度。在下图中，右侧是调用了grayscale()滤镜后的效果。

  1. div {
  2.   filter: grayscale(100%);
  3. }

image.png
5）褐色
sepia()滤镜能指定元素褐色的比例，即用褐色为元素上色。当值为1或100%时，元素会转换成完全的深褐色。在下图中，右侧是调用了sepia()滤镜后的效果。

  1. div {
  2.   filter: sepia(100%);
  3. }

image.png
6）反转
invert()滤镜能将元素的颜色反转处理，即用255或100%减去颜色的R、G和B通道的值。在下图中，右侧是调用了invert()滤镜后的效果。

  1. div {
  2.   filter: invert(100%);
  3. }

image.png
7）色相旋转
hue-rotate()滤镜能接收一个角度值，参照标准色轮（如下图）旋转元素的整体色相。
image.png
在下图中，右侧是调用了hue-rotate()滤镜旋转90°后的效果。

  1. div {
  2.   filter: hue-rotate(90deg);
  3. }

image.png
8）亮度
brightness()滤镜能调整元素的明暗程度，值越小，元素越暗。在下图中，右侧是调用了brightness()滤镜后的效果。

  1. div {
  2.   filter: brightness(50%);
  3. }

image.png
9）对比度
contrast()滤镜能调整元素颜色的对比度，对比度越低，颜色越接近。在下图中，右侧是调用了contrast()滤镜后的效果。

  1. div {
  2.   filter: contrast(30%);
  3. }

image.png
10）饱和度
saturate()滤镜能调整元素颜色的饱和度，饱和度越低，颜色越暗。在下图中，右侧是调用了saturate()滤镜后的效果。

  1. div {
  2.   filter: saturate(50%);
  3. }

image.png
11）组合
在声明filter属性时，可定义多个滤镜函数，用空格分隔，如下所示。在下图中，右侧是调用了多个滤镜后的效果。

  1. div {
  2.   filter: drop-shadow(5px 5px 5px #F60) sepia(100%) saturate(50%);
  3. }

image.png

二、SVG滤镜

所有的CSS滤镜都能通过SVG滤镜实现。以blur(5px)为例，首先用一个名为filter.svg的文件描绘模糊的效果，其内容如下所示。

  1. <svg height="0" xmlns="http://www.w3.org/2000/svg">
  2.   <filter id="blur" x="-5%" y="-5%" width="110%" height="110%">
  3.     <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
  4.   </filter>
  5. </svg>

然后通过url()函数引用SVG文件中的滤镜，注意，井号后面跟着的是filter元素的id属性值，效果如下图所示。

  1. div {
  2.   filter: url(./filter.svg#blur);
  3. }

image.png
通过SVG文件的方式就能创造出各种功能的滤镜，以适应更多的复杂场景。