一、filter

通过直接在CSS中使用filter来设置实现高斯模糊效果，其实filter是一种“假模糊”，因为需要一层做背景并且使用filter属性来达到模糊效果，另外一层（需要在背景层上面 ）设置一个半透明的背景色，二者结合使用，才能达到模糊效果。

具体示例如下所示：

.matter-view {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #000;
    opacity: 0.6;
    filter: alpha(opacity=60); //设置filter属性
}

二、backdrop-filter

       通过直接在CSS中使用backdrop-filter来设置高斯模糊效果，backdrop-filter属性其实可以让开发者为一个元素后面区域添加图形效果，因为它适用于元素背后的所有元素，为了能够看到效果，必须使元素或者背景设置为部分透明。

通过使用backdrop-filter配合背景色的方法如下所示：

       设置backdrop-filter : blur()属性，并且结合background : rgba()来实现按钮的高斯模糊效果。

使用backdrop-filter的优点：

1. 使用backdrop-filter的这种方式可以省去多设置一个after伪类来进行背景模糊的步骤，简洁方便；
2. backdrop-filter : blur()是自动把该元素后面的背景进行模糊处理，而不需指定固定的背景来进行高斯模糊。

具体设置css样式为高斯模糊效果的示例如下所示：

.end-view {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background: rgba(255,255,255,0.5); 
    //设置半透明背景backdrop-filter: blur(2px); 
    //设置backdrop-filter属性
    text-align: center;
    padding: 32rpx 0;
}
.save-btn {
    width: 585rpx;
    height: 80rpx;
    background: #49b454;
    border-radius: 40px;
    margin-left: 50%;
    transform: translateX(-50%);
}