CSS3的模糊效果(Blur)是一個非常有用的特性，能夠給網頁帶來非常棒的視覺效果。然而，一個常見的問題是模糊效果在某些情況下會導致元素出現白色邊框。這篇文章將介紹如何解決這個問題。

.box {
background-color: #fff;
padding: 20px;
width: 200px;
height: 200px;
margin: 20px;
position: relative;
}
.box:after {
content: "";
position: absolute;
top: -20px;
left: -20px;
right: -20px;
bottom: -20px;
z-index: -1;
filter: blur(20px);
}

上面的代碼演示了一個具有模糊效果的盒子。問題在于，當模糊效果被應用時，它會在元素邊緣留下一個白色邊框。這是由于模糊效果造成的，由于濾鏡會將顏色模糊到容器的外部，因此在容器的邊緣留下一小部分透明度較高的白色顏色。

要解決這個問題的最好方法是使用一個偽類元素。這樣，我們可以將模糊效果應用到偽類元素，并將其放在容器的下層。這樣，容器就不會受到透明度的影響了。

如上所示，我們使用box:after的偽類元素，設置其為絕對定位，將其尺寸設置為容器的尺寸加上一個較大的邊距，然后將其z-index設置為負值。最后，我們可以使用blur濾鏡效果將其模糊化。

這種方法可以在不影響容器背景色的情況下避免出現白色邊框。這是使用CSS3的模糊效果時需要注意的一個重要問題，也是解決這個問題的最佳方案。