CSS 3 毛玻璃效果成為現(xiàn)代網(wǎng)頁設(shè)計風(fēng)格中的一股清流，它創(chuàng)造出一個若隱若現(xiàn)的模糊效果，使得網(wǎng)頁看起來更加柔和、溫暖。下面我們來看看如何通過 CSS 3 來實現(xiàn)這個效果。

/* 首先，我們來定義一個帶有背景圖片的元素 */
.glass {
background-image: url(background.jpg);
background-size: cover;
height: 500px;
width: 500px;
}
/* 接下來，定義一個毛玻璃效果 */
.glass:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(255, 255, 255, 0.5);
box-shadow: 0px 0px 10px 10px rgba(255, 255, 255, 0.5);
filter: blur(10px);
}
/* 解釋一下上面的代碼 */
/* :after 偽元素可以在原有元素的基礎(chǔ)上創(chuàng)建一個裝飾性的元素，這里我們將其設(shè)置為全屏大小 */
/* background-color 定義透明度為 0.5 的白色背景色 */
/* box-shadow 定義 10px 的模糊光暈，增強了模糊感 */
/* filter 定義 10px 的模糊，實現(xiàn)毛玻璃效果 */
/* 最后，在 HTML 中引用這個 CSS 樣式 */

簡單來說，就是利用 :after 偽元素在原有元素上增加一層透明的白色背景，并給其定義一個 10px 的模糊效果，最后用 box-shadow 增加光暈效果，形成了漂亮的毛玻璃效果。

總的來說，CSS 3 提供了很多新的特性，毛玻璃效果就是其中之一，它讓網(wǎng)頁看起來更加光滑自然。如果您對 CSS 3 毛玻璃效果感興趣，可以試著用上面的代碼自己實踐一下。