CSS backdrop-filter 和filter两种高斯模糊的区别

1. dropback-filter:
用法：直接作用于当前元素，当前元素及其父元素，或其背景都会被高斯模糊
 
看到浏览器兼容列表详情，我以为webkit内核浏览器就能兼容此属性，可经测试以下情况并不支持：

搜狗浏览器极速模式
360浏览器极速模式，
火狐浏览器也是不支持的，有以上要求的，就要慎用了

/* 关键字值 */
backdrop-filter: none;

/* URL方式外链SVG filter */
backdrop-filter: url(zxx.svg#filter);

/* 值 */
backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);

2.filter
用法：需要作用于指定图片，才能实现当前图片的高斯模糊效果，如果仅仅作用于一空元素，并无作用，因此很多场景下，filter就很难适用了
但其功能强大：可设置属性诸如：亮度、透明度、对比度、色相、饱和度、灰度等复合效果

/* URL to SVG filter */
filter: url("filters.svg#filter-id");

/*  values */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

/* Multiple filters */
filter: contrast(175%) brightness(3%);

总结：drop-filter用于背景，filter用于整体