在CSS中，我们可以使用滤镜(filter)为图片添加模糊特效。但是这种处理会造成图片边界也变得模糊，那么CSS实现图片高斯模糊但边界清楚的效果怎么写呢？
有些时候，我们可能需要图片模糊但是边界清楚的效果，这时候可以考虑一种思路：在图片外面加一个框防止显示内容溢出，在框内将图片居中，模糊并适当放大，让模糊的白边刚好在显示范围外面，下面是实现方法：
<!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>
在线QQ：
