开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第8天，点击查看活动详情
不知道大家是否好奇过 p 图或者剪辑软件中对于图片或视频的滤镜处理是如何实现的，最简单便捷的方式就是使用 CSS3 中的 filter(滤镜) 属性来处理，效果如下图：
只是切换了 filter 属性中不同的值，就实现了滤镜效果的切换，所以代码中来模拟这种形式，并设置一个改变值的滑动条，就可以实现一个滤镜切换的功能。
那么接下来一起来看看它都包含哪些值的配置：
属性配置
使用方式：
filter: blur(6px);
属性：
- 高斯模糊效果：blur() ，单位：px（不支持百分比的形式）
- 亮度：brightness()，单位：%（0% 会变成纯黑色，100% 则无变化）
- 对比度：contrast()，单位：%（同上）
- 灰度：grayscale()，单位：%（100% 会变成完全灰度状态，0% 则无变化）
- 透明度：opacity()，单位：%
- 饱和度：saturate()，单位：%
- 色相旋转：hue-rotate()：单位 deg（色环的角度）
- 反转：invert()，单位：%
- 换为深褐色：sepiay()，单位：%
- 阴影效果：drop-shadow()
drop-shadow(8px 8px 10px green)
除此之外还有 url() 可以配置svg 相关的效果
滤镜效果
接下来我们看看将上面的部分设置为 filter 的值，实现出来的效果（第一张为原图）：
不仅仅是图片，filter 对于视频的 video 标签也是可以生效的，比如为美食视频添加效果，让食物拥有诱人的色泽，调试一下 contrast 对比度（下图为 contrast 从 30% 到 170% 的变化过程）
注：如果视频设置了工具栏，工具栏也会产生同样的滤镜效果
兼容性
注意多浏览器兼容，Chrome, Safari, Opera 可以使用：-webkit-filter，且 Internet Explorer 不支持 filter 属性，其它可参考下表：
其他方式
前面所使用的 filter 方式只是能够实现一些简单的效果，如果有更复杂的滤镜场景，可以使用 WebGL提供的 api 来实现
