CSS模糊效果可以給網(wǎng)頁增添一些藝術(shù)感和美感。它可以模糊圖片、文字和其他網(wǎng)頁元素。在本文中，我們將展示一些常見的模糊效果。

.blur {
/* 模糊圖片 */
filter: blur(5px);
}
.blur-text {
/* 模糊文字 */
text-shadow: 0px 0px 5px rgba(0,0,0,0.5);
}
.opacity {
/* 半透明 */
opacity: 0.5;
}
.invert {
/* 反色 */
filter: invert(100%);
}

首先是模糊圖片的效果，你可以使用filter: blur(X);，其中的X是一個值，代表著模糊的半徑（以像素為單位）。下面的演示展示了一個 5 像素的圖片模糊效果：

接著是模糊文字的效果，你可以使用text-shadow: 0px 0px X rgba(0,0,0,0.5);，其中的X代表著文字的模糊半徑。下面的演示展示了一個 5 像素的文字模糊效果：

Hello World

我們還可以使用不透明度效果。當(dāng)代的設(shè)計(jì)傾向于使用半透明色調(diào)。opacity屬性允許我們讓一個元素更透明，取值為 0 到 1 之間。比如下面的演示展示了一個 50% 不透明度的圖片：

最后，我們可以使用反色效果filter: invert(100%);來翻轉(zhuǎn)元素的顏色。比如下面的演示展示了一個將圖片顏色顛倒的效果：

以上就是本文的所有展示。希望這對您有所啟發(fā)，為您的網(wǎng)站設(shè)計(jì)添加一些個性化元素。