CSS中实现毛玻璃（背景模糊内容不模糊）效果

最近发现css中有这样一个样式：

backdrop-filter: blur(10px);

不同于filter:blur(10px)的是，这样可以使背景模糊而内容不模糊
效果如下：

代码如下：

<div class="main">
    <div class="filter">filter</div>
    <div class="backdrop-filter">backdrop-filter</div>    
</div>
<style>
.main{
    display: flex;
    background: linear-gradient(to left, rgb(255, 107, 132), rgb(202, 240, 255));
    width: 300px;
    height: 150px;
}
.filter{
    width:100px;
    height:100px;
    background-color: rgba(255, 255, 255, 0.5);
    filter:blur(2px);
}
.backdrop-filter{
    width:100px;
    height:100px;
    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter:blur(10px);
}
</style>

当然，这个效果比较吃性能，firefox目前也不支持这个效果

目前chrome是能完美支持的（