点击上方蓝字关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！

说到滤镜，搞前端的应该都不陌生，因为不管是曾经还是现在，你都有可能用过或者在用Photoshop。所有滤镜在这个软件中都是按分类在菜单中。滤镜，主要是用来实现图像的各种特殊效果。

简单来说，CSS滤镜就是提供类似PS的图形特效，像模糊，锐化或元素变色等功能。通常被用于调整图片，背景和边界的渲染。这篇我来看一下CSS滤镜中那些常用的用法。

一、常用的

1、使用filter：blur(px) - 生成毛玻璃效果，值越大越模糊。

2、使用filter：drop-shadow() - 生成整体阴影效果，和box-shadow相似，但又不同。

3、使用filter：opacity(%) - 生成透明度，0%是完全不饱和，100%图像无变化。

下面我举个例子来看一下它们的用法：

CSS代码：（如下id值是设定在img元素上）

当鼠标移上去时，显示出原图的模样，具体效果如下所示：

这样就一目了然了。

二、必需知道的

除了上面说的三种之外，CSS滤镜还有另外七种，虽然相对来说不是特别常用，但是真的特别有用，尤其是在做一个技巧性的效果的时候，需要组合这些用法，所以，也是我们必需要知道的。

下面通过一些取值来看一下单独设置时的具体效果：

1、filter： contrast(200%) - 调整图像的对比度。

2、filter： grayscale(1) - 将图像转换为灰度图像。

3、filter： invert(.9) - 反转输入图像。

4、filter：brightness（.5）- 给图片应用一种线性乘法，使其看起来更亮或更暗。

5、filter：saturate（6）- 转换图像饱和度。

6、filter：sepia（1）- 将图像转换为深褐色。

7、filter：hue-rotate（45deg）- 给图像应用色相旋转。

当取上面这些值时，我们来看一下具体效果：

总结一下：

写了10个滤镜的用法，其实滤镜的用处不仅限制在单独去使用它们，更重要的是知道如何组合这些属性去处理你想要的效果。关于一些技巧性的用法，下次来写。