高斯模糊

⽤CSS实现⾼斯模糊背景效果

⾼斯模糊是⼀种常见的效果（俗称⽑玻璃效果），在CSS中使⽤filter、backdrop-filter属性均可实现。

这⾥主要介绍简单的⽅式：backdrop-filter:blur();

简介：

backdrop-filter是使透过该层的底部元素模糊化

backdrop-filter属性可以让你为⼀个元素后⾯区域添加图形效果（如模糊或颜⾊偏移）。

因为它适⽤于元素背后的所有元素，为了看到效果，必须使元素或其背景⾄少部分透明。

backdrop-filter⽬前兼容性不佳，尤其是安卓移动端

blur()使得出现⽑玻璃效果，只会模糊背景

yle::before{

2content:"";

3position:absolute;

4top:0;

5right:0;

6bottom:0;

7left:0;

8background-color:rgba(31,33,41,0.4);

9z-index:-1;

10-webkit-backdrop-filter:blur(80px);

11backdrop-filter:blur(80px);

12}

yle{

14width:200px;

15height:100px;

16position:relative;

17}