CSS滤镜（filter）

概念
filters是CSS3里新增的一种神奇的功能，一般我们提及滤镜，就会想到使用PhotoShop制作的图片，但是使用CSS滤镜不需要任何作图软件，仅使用CSS就会生成多种的滤镜效果，例如模糊效果、透明效果、色彩反差调整等等；同时，CSS滤镜不仅可以对图片进行滤镜处理，还可以对网页元素甚至视频进行滤镜处理。

2、使用
CSS 中实现滤镜效果需要通过 filter 属性并配合一些函数来实现。

3、常用filter函数

4、常用滤镜实例
代码如下：

<br><br>

<img src="../images/1.jpg" alt="" id="img0">

<br><br>

<img src="../images/1.jpg" alt="" id="img1">

<br><br>

<img src="../images/1.jpg" alt="" id="img0">

<br><br>

<img src="../images/1.jpg" alt="" id="img2">

<br><br>

<img src="../images/1.jpg" alt="" id="img0">

<br><br>

<img src="../images/1.jpg" alt="" id="img3">

<br><br>

<img src="../images/1.jpg" alt="" id="img0">

<br><br>

<img src="../images/1.jpg" alt="" id="img4">

<br><br>

<img src="../images/1.jpg" alt="" id="img0">

<br><br>

<img src="../images/1.jpg" alt="" id="img5">

<br><br>

<img src="../images/1.jpg" alt="" id="img0">

<br><br>

<img src="../images/1.jpg" alt="" id="img6">

<br><br>

<img src="../images/1.jpg" alt="" id="img0">

<br><br>

<img src="../images/1.jpg" alt="" id="img7">

<br><br>

<img src="../images/1.jpg" alt="" id="img0">

<br><br>

<img src="../images/1.jpg" alt="" id="img8">

<br><br>

<img src="../images/1.jpg" alt="" id="img0">

<br><br>

<img src="../images/1.jpg" alt="" id="img9">

<br><br>

<img src="../images/1.jpg" alt="" id="img0">

<br><br>

<img src="../images/1.jpg" alt="" id="img10">

在这里插入图片描述 模糊效果（2px）： 

调整亮度效果（0.5）：

调整灰度效果（100%）：

阴影效果：

调整对比度效果（50%）：

反转图像效果（100%）：

图像不透明度效果（50%）：

图像转为棕褐色效果（80%）：

调整饱和度效果（50%）：

图像色相旋转效果（30deg）：