CSS圓形濾鏡是一個強大且實用的工具，它可以幫助我們在網頁設計中創建出美麗的圓形效果。在這篇文章中，我們將探討如何編寫CSS圓形濾鏡，并通過使用pre標簽來演示代碼。

/* CSS圓形濾鏡 */
.circle {
width: 100px;
height: 100px;
background-color: #f1c40f;
border-radius: 50%;
filter: blur(5px); /* 模糊濾鏡 */
}

首先，我們要將元素的border-radius設置為50%，這樣就可以將矩形變成圓形。然后，我們可以通過添加filter屬性來創建濾鏡效果。在上述代碼中，我們使用了模糊濾鏡，并將其值設置為5像素。

除了模糊濾鏡之外，我們還可以使用其它濾鏡效果，如下：

/* 剪影濾鏡 */
.shadow {
width: 100px;
height: 100px;
background-color: #f1c40f;
border-radius: 50%;
filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.5));
}
/* 反色濾鏡 */
.invert {
width: 100px;
height: 100px;
background-color: #f1c40f;
border-radius: 50%;
filter: invert(1);
}
/* 灰度濾鏡 */
.grayscale {
width: 100px;
height: 100px;
background-color: #f1c40f;
border-radius: 50%;
filter: grayscale(1);
}

在上述代碼中，我們使用了三種不同的濾鏡效果：

• 剪影濾鏡可以幫助我們創建出生動的陰影效果。
• 反色濾鏡可以讓元素的顏色變得相反，這種效果可以用來制作炫酷的按鈕效果。
• 灰度濾鏡可以將元素變成黑白色，這種效果可以用來制作簡潔的圖標。

總的來說，CSS圓形濾鏡是一種非常實用和有用的工具，通過適當的濾鏡效果，我們可以讓網頁設計更加生動和有趣。希望您通過這篇文章，可以學習到如何創建并使用CSS圓形濾鏡。