本日我们来看一些常用的css效果。这是一个很常见的磨砂玻璃效果，代码很大略。
·一个半透明的元素盖在一行笔墨的上面，看到模糊效果第一想到切实其实定是filter了。我们加上filter看看效果，可以瞥见模糊效果是有了，但和我们的预期是完备不符的。这块有一个误区须要搞清楚，我们给这个伪元素加点内容，效果一览无余。filter是针对元素自身的，以是要实现磨砂玻璃的效果filter是肯定弗成的。
Ai已经给出了提示，我们姑且试一试。效果已经有了，我们把模糊值改小一些增加一些透明度，这个效果和我们的预期完备符合了。记住这个API"backdrop-filter"是针对当前元素后面的内容。
·我们再来看另一个效果，鼠标移入页面变成了彩色，移出又变成了黑白。我们看看这个效果该怎么做？首先肯定须要一张图片，图片的上面肯定是有一个遮罩层的。我们来写一下遮罩层的样式，用我们前面利用过得back drop filter API试试看有什么效果。过滤一下灰度值，可以看到图片已经变成了黑白色。
·接下来我们做一下遮罩层的拉幕效果，当鼠标移入的时候把遮罩层的宽度变成0，给遮罩层加一个过渡。看看终极的效果，鼠标移入变成彩色，移出规复黑白。
关于css滤镜还有很多用途，比如网站一键变黑白，我们只须要给body添加一个灰度滤镜即可。是不是很大略？任意网站一键变灰，一个滤镜全部搞定。