css实现模糊

一、filter
这种方式有白边，需要把盒子设置大一点，把白边隐藏。

<div class="bg-box"><div class="bg"></div><div><style>.bg-box{width:100%;heigth:100%;position:relative;overflow:hidden;}.bg{position:absolute;top:-2.5%;left:-2.5%;
    z-index:-2;height:105%;width:105%;filter:blur(5px);}

二、backdrop-filter
适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。

在需要模糊的盒子上添加一层遮罩的盒子

<div class="box">
    需要模糊的内容
<div><div class="filter"></div><style>.filter{position:absolute;top:0;left:0;height:100%;width:100%;
    backdrop-filter:blur(2px);}</style>

详细可看
filter - CSS（层叠样式表） | MDN
backdrop-filter - CSS（层叠样式表） | MDN
CSS实现模糊