CSS背景模糊化是現代網頁設計中非常流行的一種效果，它可以讓頁面在視覺上更加柔和，也可以幫助頁面元素更好地凸顯出來。但是，有時候我們可能只想模糊背景而不影響邊框，這該怎么實現呢？

.box {
background: url('background.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
border: 1px solid #000;
-webkit-backdrop-filter: blur(10px);
-moz-backdrop-filter: blur(10px);
-o-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.box::before {
content: "";
display: block;
position: absolute;
z-index: -1;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
background: inherit;
border: inherit;
-webkit-backdrop-filter: blur(10px);
-moz-backdrop-filter: blur(10px);
-o-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}

以上是實現只模糊背景的CSS代碼，我們可以先給外層的元素（.box）設置背景圖，并通過 backdrop-filter 屬性對其進行模糊處理。但是此時邊框也會被模糊化，為了解決這個問題，我們可以借助 ::before 偽元素來實現。將內容設置為空，然后復制外層元素所有的樣式（包括邊框），并將其插入到外層元素的頂部，最后再對其進行一次模糊處理。

通過以上的方法，我們就可以很輕松地實現只模糊背景而不模糊邊框的效果啦！