在CSS中，我们可以使用滤镜(filter)为图片添加模糊特效。但是这种处理会造成图片边界也变得模糊，比如下图这种情况：
示例图片来源：Unsplash
Photo by Josh Hild on Unsplash
原图：
直接使用filter模糊：
有些时候，我们可能需要图片模糊但是边界清楚的效果，这时候可以考虑一种思路：在图片外面加一个框防止显示内容溢出，在框内将图片居中，模糊并适当放大，让模糊的白边刚好在显示范围外面，下面是实现方法：
<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS高斯模糊</title><style>/* 初始化 */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); /* 模糊效果，与宽高搭配做适当调整，把白边推出边界隐藏掉 */}</style></head><body><div class="box"><!-- 图片外框 --><div class="image"></div><!-- 图片层 --></div></body></html>
实现效果如下图：
