6、滤镜
最后更新于：2022-04-02 06:08:06
滤镜（filter）可改造元素的视觉呈现，CSS内置的滤镜有10种，通过SVG文件还能自定义滤镜。
## 一、调色滤镜
调色滤镜可控制元素的模糊、颜色、亮度等变化，并且多个滤镜可组合在一起使用。这些滤镜大部分既能接收百分数，也能接收数值。当传入的值大于上限值时，会以上限值来处理。
**1）模糊**
blur()滤镜会对元素进行高斯模糊的处理，它能接收一个模糊半径的长度值。注意，不能向其传递负数。在下图中，右侧是调用了blur()滤镜后的效果。
~~~css
div {
filter: blur(5px);
}
~~~
:-: 
**2）透明**
opacity()滤镜可控制元素的透明度，其默认值为1或100%（表示不透明），最小值为0。opacity()滤镜与opacity属性类似，但两者不是互斥关系，可同时应用于同一个元素，不过opacity属性会在执行完所有的滤镜后再起作用。在下图中，右侧是调用了opacity()滤镜后的效果。
~~~css
div {
filter: opacity(.5);
}
~~~
:-: 
**3）阴影**
drop-shadow()滤镜可为元素的透明部分提供阴影，其取值与text-shadow属性类似，也是X轴与Y轴的偏移、模糊半径以及颜色。下图使用了一张透明的五角星图，右侧调用了drop-shadow()滤镜，阴影会沿着透明轮廓渲染。
~~~css
div {
filter: drop-shadow(5px 5px 5px #F60);
}
~~~
:-: 
**4）灰度**
grayscale()滤镜能转换元素的灰度，当值为1或100%时，元素会转换成完全的灰度。在下图中，右侧是调用了grayscale()滤镜后的效果。
~~~css
div {
filter: grayscale(100%);
}
~~~
:-: 
**5）褐色**
sepia()滤镜能指定元素褐色的比例，即用褐色为元素上色。当值为1或100%时，元素会转换成完全的深褐色。在下图中，右侧是调用了sepia()滤镜后的效果。
~~~css
div {
filter: sepia(100%);
}
~~~
:-: 
**6）反转**
invert()滤镜能将元素的颜色反转处理，即用255或100%减去颜色的R、G和B通道的值。在下图中，右侧是调用了invert()滤镜后的效果。
~~~css
div {
filter: invert(100%);
}
~~~
:-: 
**7）色相旋转**
hue-rotate()滤镜能接收一个角度值，参照标准色轮（如下图）旋转元素的整体色相。
:-: 
在下图中，右侧是调用了hue-rotate()滤镜旋转90°后的效果。
~~~css
div {
filter: hue-rotate(90deg);
}
~~~
:-: 
**8）亮度**
brightness()滤镜能调整元素的明暗程度，值越小，元素越暗。在下图中，右侧是调用了brightness()滤镜后的效果。
~~~css
div {
filter: brightness(50%);
}
~~~
:-: 
**9）对比度**
contrast()滤镜能调整元素颜色的对比度，对比度越低，颜色越接近。在下图中，右侧是调用了contrast()滤镜后的效果。
~~~css
div {
filter: contrast(30%);
}
~~~
:-: 
**10）饱和度**
saturate()滤镜能调整元素颜色的饱和度，饱和度越低，颜色越暗。在下图中，右侧是调用了saturate()滤镜后的效果。
~~~css
div {
filter: saturate(50%);
}
~~~
:-: 
**11）组合**
在声明filter属性时，可定义多个滤镜函数，用空格分隔，如下所示。在下图中，右侧是调用了多个滤镜后的效果。
~~~css
div {
filter: drop-shadow(5px 5px 5px #F60) sepia(100%) saturate(50%);
}
~~~
:-: 
## 二、SVG滤镜
所有的CSS滤镜都能通过SVG滤镜实现。以blur(5px)为例，首先用一个名为filter.svg的文件描绘模糊的效果，其内容如下所示。
~~~html
~~~
然后通过url()函数引用SVG文件中的滤镜，注意，井号后面跟着的是filter元素的id属性值，效果如下图所示。
~~~css
div {
filter: url(./filter.svg#blur);
}
~~~
:-: 
通过SVG文件的方式就能创造出各种功能的滤镜，以适应更多的复杂场景。
*****
> 原文出处：
[博客园-CSS躬行记](https://www.cnblogs.com/strick/category/1667864.html)
[知乎专栏-CSS躬行记](https://zhuanlan.zhihu.com/pwcss)
已建立一个微信前端交流群，如要进群，请先加微信号freedom20180706或扫描下面的二维码，请求中需注明“看云加群”，在通过请求后就会把你拉进来。还搜集整理了一套[面试资料](https://github.com/pwstrick/daily)，欢迎浏览。
';