CSS 是我們常用的網頁設計工具，通過 CSS 可以對網頁的內容進行各種美化，今天我們來學習一下如何通過 CSS 實現圖片局部模糊的效果。

.blur {
position: relative;
display: inline-block;
cursor: pointer;
}
.blur img {
filter: blur(0); /* 初始值為0，即不模糊 */
transition: all 0.3s ease-in-out; /* 過渡效果 */
}
.blur:hover img {
filter: blur(5px); /* 鼠標懸浮時，給圖片局部模糊的效果 */
}
/* 為了方便演示，我們使用一個盒子用來放置圖片 */

在上面的代碼中，我們定義了一個叫做 blur 的類，這個類會被應用到一個包含圖片的 div 或者其他容器中。在這個容器中，我們加入了一個 img 元素用來展示圖片。初始時，我們將圖片不進行模糊，當用戶鼠標懸浮在圖片上時，則會給圖片添加模糊效果，這里我們設置的模糊半徑為 5px。

接下來，我們看一下代碼中加入了一個 transition 過渡效果。這個過渡效果是用來讓圖片的模糊效果過渡更加平滑的，以便于讓用戶更加愉悅的體驗網頁。

最后，我們給 blur 類加上了一個鼠標指針樣式，這樣用戶就能看出來這個容器內的圖片是可以被點擊的。當用戶點擊圖片時，我們可以為它添加一個鏈接，讓用戶可以點擊跳轉到其他頁面，實現圖片的更好的交互性。

這就是使用 CSS 實現圖片局部模糊的簡單教程，希望對你有幫助。