在使用 CSS3 blur 高斯模糊效果時，有時候會出現(xiàn)黑邊的情況，這可能是由于模糊半徑太大或者圖片被拉伸導致的。下面我們來介紹一些解決方法。

.box {
width: 300px;
height: 300px;
background-image: url("example.jpg");
background-position: center;
background-size: cover;
-webkit-filter: blur(10px);
filter: blur(10px);
}

在上面的代碼中，我們給一個寬高都為 300 像素的盒子添加了背景圖片，并使用了 blur 高斯模糊效果。然而，當我們預覽時會發(fā)現(xiàn)圖片邊緣出現(xiàn)了黑邊。

解決方法一：減小模糊半徑

.box {
-webkit-filter: blur(5px);
filter: blur(5px);
}

通過減小模糊半徑可以有效減輕黑邊的出現(xiàn)。

解決方法二：使用 clip-path

.box {
-webkit-clip-path: inset(10px);
clip-path: inset(10px);
-webkit-filter: blur(10px);
filter: blur(10px);
}

使用 clip-path 屬性可以裁剪圖片邊緣，避免黑邊的出現(xiàn)。

解決方法三：使用 background-size

.box {
background-image: url("example.jpg");
background-size: 320px 320px;
-webkit-filter: blur(10px);
filter: blur(10px);
}

通過設置背景圖片大小，可以消除圖片被拉伸導致的黑邊。

綜上所述，通過適當調(diào)整模糊半徑、使用 clip-path 屬性或者設置背景圖片大小，可以有效解決 CSS3 blur 黑邊的問題。