CSS是Web設計中不可或缺的一部分，它可以很好地控制HTML元素的樣式與排版方式。而在今天，我們將要一起學習如何使用CSS來美化圖片并添加濾鏡效果。

/* 圖片添加樣式 */
img {
border: 1px solid #cccccc;
box-shadow: 1px 1px 5px #cccccc;
}
/* 濾鏡樣式 */
img:hover {
filter: grayscale(100%) blur(1px);
}

代碼中的第一個部分是一個簡單的樣式，用來給圖片添加一些基礎的樣式。其中border屬性用來設置邊框，而box-shadow屬性則用來添加陰影效果。

接下來的部分則是實現圖片濾鏡效果的關鍵。我們使用hover偽類來實現鼠標懸停時圖片的濾鏡效果。其中的filter屬性則是用來實現濾鏡效果的核心，這里我們使用了grayscale函數和blur函數，分別實現圖片的黑白化和模糊化效果。

最終的效果是當鼠標懸停在圖片上時，圖片會變為黑白并模糊，從而為頁面增添了一些特別的視覺效果。當然，這只是濾鏡效果的其中一種，我們還可以使用CSS中的其他濾鏡函數，例如brightness、contrast、sepia等等，來實現更加多樣化的效果。