在CSS中，我们可以使用滤镜(filter)为图片添加模糊特效。但是这种处理会造成图片边界也变得模糊，那么CSS实现图片高斯模糊但边界清楚的效果怎么写呢？
有些时候，我们可能需要图片模糊但是边界清楚的效果，这时候可以考虑一种思路：在图片外面加一个框防止显示内容溢出，在框内将图片居中，模糊并适当放大，让模糊的白边刚好在显示范围外面，下面是实现方法：
CSS高斯模糊
/* 初始化 */
html,body {
margin: 0;
padding: 0;
height: 100%;
}
/* 图片外框 */
.box {
position: relative;
width: 800px;
height: 600px;
display: flex;
justify-content: center;
align-items: center; /* 使用flex将图片水平垂直居中 */
overflow: hidden; /* 溢出部分隐藏 */
}
/* 图片层 */
.image {
position: absolute;
width: 115%;
height: 115%;
background-image: url(example.jpg);
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
filter: blur(20px); /* 模糊效果，与宽高搭配做适当调整，把白边推出边界隐藏掉 */
}
