CSS backdrop-filter简介与苹果iOS毛玻璃效果

有人说backdrop-filter和filter的语法类似。错！不是类似，是一模一样，如出一辙，毫无二致。

看下面的对比表：

backdrop-filter	filter
backdrop-filter: none;	backdrop-filter: none;
backdrop-filter: url(zxx.svg#filter);	filter: url(zxx.svg#filter);
backdrop-filter: blur(2px);	filter: blur(2px);
backdrop-filter: brightness(60%);	filter: brightness(60%);
backdrop-filter: contrast(40%);	filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);	filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);	filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);	filter: hue-rotate(120deg);
backdrop-filter: invert(70%);	filter: invert(70%);
backdrop-filter: opacity(20%);	filter: opacity(20%);
backdrop-filter: sepia(90%);	filter: sepia(90%);
backdrop-filter: saturate(80%);	filter: saturate(80%);

backdrop-filter和filter区别

backdrop-filter是让当前元素所在区域后面的内容模糊灰度或高亮之类，要想看到效果，需要元素本身半透明或者完全透明；而filter是让当前元素自身模糊灰度或高亮之类。

dialog {
    -webkit-backdrop-filter: blur(5px);	
    backdrop-filter: blur(5px);	
}

参考链接

https://www.zhangxinxu.com/wordpress/2019/11/css-backdrop-filter/?from=timeline&isappinstalled=0