探究css的滤镜效果

今天来讲一讲前端的滤镜效果，也就是filter属性

drop-shadow

如果我让你对一个图片里面的图形设置阴影，你有什么办法吗？
正常来说你可能想到的是box-shadow,给盒子设置一个阴影

box-shadow: 10px 10px 10px gray;

但是好像没有达到我们预期的效果，那么这里就要用上drop-shadow了
不要box-shadow，而是filter

filter: drop-shadow(10px 10px 10px gray);

这个值会让像素变得模糊
正常来说:

设置blur后（后面还发现了一个神奇的现象，我的margin: 0 auto;好像失效了，但是好像又没有，因为这个盒子还是在屏幕中间的，不知道为什么，好像这个blur会使这个元素的像素点回到最初的状态）

filter: blur(10px);

提高色彩对比度

变灰，一些纪念日用得上

正常:

如果我想给他的背景加点模糊效果，怎么做呢?
注意这里可不能用filter了
而是得用到我们的backdrop-filter
这个可以模糊自身后面的像素

backdrop-filter: blur(10px);