css 实现局部模糊 backdrop-filter

 css3有很多属性，平时没用到真没注意。百度的时候词不达意，但其实很简单，记录给有缘人^_^

先看效果，这是一张canvas地图，我需要在上面局部加上毛玻璃效果。

网上很多说使用两张图片再对其中一张进行filter。但其实在图片的位置上面定位一个你需要模糊的块，再使用backdrop-filter就行了

代码示例：

    <!-- 地图 -->
    <div id="mapContent">
      <!-- 左右区域 -->
      <p class="blur"></p>
      <p class="blur"></p>
    </div>

#mapContent{
    position:relative;
}
.blur {
  position: absolute;
  left: 0;
  top: 0;
  width: 25%;
  height: 100%;
  backdrop-filter: blur(20px);
  &:last-child {
    right: 0;
    left: auto;
  }
}