CSS中常见的视觉效果

​​filter​​是滤镜属性，属性支持的有10个滤镜函数。

​​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()​​函数可以用来调节元素的亮度，参数值支持百分比值和数值，范围是0到无穷大。当参数值为0或0%表示纯黑色，参数值为1或者100%表示正常的亮度，01或0100%亮度是线性变化的。随着参数数值逐渐大于1或者大于100%，元素的亮度也会逐渐提升。参数值还可以为空，当为空的时候相当于使用参数值为1。如果在深色模式下，我们想要降低图像的亮度，可以使用brightness函数。除了明暗的调整，brightness函数还可以用来实现黑白着色效果。

.warpper {
    filter: brightness(3.6);
}

​​contrast()​​函数可以用来调节元素的对比度，参数值支持百分比值和数值，范围也是0到无穷大。参数值0或0%表示毫无对比度，表现为纯灰色，色值为#808080，也可以用rgb(128,128,128)。这里的纯灰色指的是图像会直接变成一个灰色色块。参数值1或者100%表示正常的对比度。随着参数值逐渐大于1，元素的对比度也会逐渐提升。当参数值为空时，相当于参数值为1。除了可以调节常规的对比度，还可以和其他函数配合，实现融合粘滞效果。

filter: contrast();
// 等价于
filter: contrast(1);

​​drop-shadow()​​函数可以给元素设置符合真实世界阴影规则的投影效果。drop-shadow函数不支持扩展，而是我们不能把red修改为5px，这样是不对的。drop-shadow函数也没有内投影，也不支持inset关键字。不支持投影叠加，也不支持使用逗号语法重叠多个投影。但是drop-shadow可以实现符合真实世界的投影，凡是透明镂空的地方，一定会留下相应的阴影轮廓。

filter: drop-shadow(6px 6px 10px red);

第一个参数6px代表的是x偏移，第二个参数6px代表的是y偏移，第三个参数10px代表的是模糊大小，第四个参数代表的是色值。

​​grayscale()​​函数可以实现元素的去色效果，让所有彩色值变成灰度值。函数值支持百分比值和数值，范围是0到无穷大。参数值为1或100%的时候表现为完全灰度；参数值大于1或100%的时候也表现为完全灰度。0或0%表示为正常的图像表现。在0到1或0%到100%范围区间的灰度是线性变化的。参数值也可以为空，等同于使用参数值为0。我们可以用于特殊日子让网页变灰或者实现网站中徽章点亮的效果。

filter: grayscale();
// 等于
filter: grayscale(0)

​​hue-rotate()​​函数可以调整元素的色调，但饱和度和亮度保持不变。参数值支持角度值，角度值没有范围限制，每360度就是一个循环。hue-rotate不会改变任意灰度色值。可以用于实现元素的色彩无线变化效果。

.warpper {
    filter: hue-rotate(67deg);
}

​​invert()​​函数可以让元素的亮度和色调同时反转。支持百分比值和数值。范围0到无穷大，参数值为1或100%的时候图像表现为完全反相。当值大于1或者100%，效果不会再次变化。0或0%表示正常的图像表现。invert函数可以和hue-rotate()函数一起使用，实现反转元素亮度的效果。

.warpper {
    filter: invert(66%); //等价于invert(0.66);
}
filter: invert(1) hue-rotate(180deg);

​​opacity()​​函数可以改变元素的透明度，效果和opacity属性类似。参数值支持百分比值和数值，范围是0到无穷大。参数值为0或者0%的时候图像表现为完全透明；参数值为1或100%或者更大值的时候，图像均为正常表现。

.warpper {
    filter: opacity(66%); //等价于opacity(0.66);
}

​​saturate()​​函数可以调整元素的饱和度，参数值支持百分比值和数值，范围是0到无穷大，参数值为0或0%表示毫无饱和度，表现为灰度效果，等同于grayscale(1)；参数值为1或者100%表示正常的饱和度；随着参数值逐渐大于1，元素的饱和度也会逐渐提升。当参数值为空时，相当于参数值为1；

filter: saturate()
//相等
filter: saturate(1);