filter滤镜——CSS的PS特技

在“影视界”，滤镜，也叫“色彩校正”，就好像化妆师在给镜头中的景物或人物施妆容。有了滤镜的加入，可以让影片在光线、色调、质感各方面，得到更丰富的效果。

当然，这化妆功能，不仅仅是影视剧的专利。在Web世界中，想要对图片搞出一些新花样，让我们一招解决。

接下来，我们就拿CSS中的<filter>滤镜来玩个把戏，你一定会说：“哟嚯，这效果妥妥滴。”

1. 投影滤镜—drop-shadow

让图像产生投影，效果就像在图片下方摆了个阴影，如下：

filter: drop-shadow(10px 10px 5px #FF0000);

上方代码中，“10px 10px”表示投影的水平偏移和垂直偏移；“5px”是模糊半径，范围是0~255，值越大，投影就越模糊；“#FF0000”则是投影颜色。

效果如下：

2. 模糊滤镜—blur

可对图片进行模糊处理，设置“模糊半径”越大，图像的模糊程度也就越大，如下：

filter: blur(10px);

“10px”是模糊半径，范围是0~255，越大的半径，图像也就越模糊。

效果如下：

3. 棕褐色滤镜—sepia

给图像增加一种复古风味的棕褐色色调，如下：

filter: sepia(1);

“1”是棕褐色的浓度，范围是0~1，1表示图像完全变成棕褐色。

效果如下：

4. 反色滤镜—invert

使图像中的颜色反转，如下：

filter: invert(1);

“1”是反转程度，范围是0~1，1表示完全反转。

效果如下：

5. 饱和度滤镜—saturate

增加图像的饱和度，让色彩变得更加鲜艳，如下：

filter: saturate(2);

“2”是饱和度的倍数，范围是0~20，2表示将饱和度提升2倍。

效果如下：

6. 色相旋转滤镜—hue-rotate

改变图像的色相，让图像变成另一种色彩，如下：

filter: hue-rotate(180deg);

“180deg”是色相旋转的角度，范围是0~360deg，180度表示图像中的所有颜色都旋转了180度。

效果如下：

7. 灰度滤镜—grayscale

让图像中的所有颜色都变成灰色，如下：

filter: grayscale(1);

“1”是灰度的浓度，范围是0~1，1表示图像完全变成灰色。

效果如下：