这是我参与11月更文挑战的第23天，活动详情查看：2021最后一次更文挑战
filter
filter是滤镜属性，属性支持的有10个滤镜函数。
blur
blur()函数可以让元素或者图像产生高斯模糊的效果，而且支持任意长度值，但是不支持百分比值。blur()函数的参数值表示高斯函数的标准偏差值，可以理解为屏幕上互相融合的像素数量，因此函数的参数值越大，图像的模糊效果越明显。blur()还可以用来实现径向模糊或者局部模糊的效果。
.wrapper {
filter: blur(6px);
}
当图像的边缘区域的像素点数量不足，图像边缘的模糊效果是半透明的，但是如果我们不想出现这种效果:
<div class="wrapper">
<img src="test.jpg" width="333" height="222">
<span>blur函数</span>
</div>
<style>
.wrapper {
width: 333px;
height: 222px;
overflow:hidden;
}
.wrapper img {
filter: blur(6px);
}
</style>
这样的话，我们发现图片的边缘泛白，如果图片在黑色背景中，边缘则会染黑。想解决这种效果，我们可以在高斯模糊的图片下面再增加一张同样的没有设置高斯模糊的图片或者适当放大图片。
.wrapper img {
transform: scale(1,1);
filter: blue(6px);
}
这样图像的边缘就不会出现半透明效果了。如果不考虑兼容性，我们可以使用backdrop-filter属性实现高斯模糊效果，边缘默认不会泛白。
brightness
brightness()函数可以用来调节元素的亮度，参数值支持百分比值和数值，范围是0到无穷大。当参数值为0或0%表示纯黑色，参数值为1或者100%表示正常的亮度，01或0100%亮度是线性变化的。随着参数数值逐渐大于1或者大于100%，元素的亮度也会逐渐提升。参数值还可以为空，当为空的时候相当于使用参数值为1。如果在深色模式下，我们想要降低图像的亮度，可以使用brightness函数。除了明暗的调整，brightness函数还可以用来实现黑白着色效果。
.warpper {
filter: brightness(3.6);
}
contrast
contrast()函数可以用来调节元素的对比度，参数值支持百分比值和数值，范围也是0到无穷大。参数值0或0%表示毫无对比度，表现为纯灰色，色值为#808080，也可以用rgb(128,128,128)。这里的纯灰色指的是图像会直接变成一个灰色色块。参数值1或者100%表示正常的对比度。随着参数值逐渐大于1，元素的对比度也会逐渐提升。当参数值为空时，相当于参数值为1。除了可以调节常规的对比度，还可以和其他函数配合，实现融合粘滞效果。
filter: contrast();
// 等价于
filter: contrast(1);
