CSS通知和消息小圖標(biāo)是網(wǎng)頁(yè)設(shè)計(jì)中非常有用的元素之一。他們可以幫助用戶快速獲取網(wǎng)站的最新信息，并提供更好的用戶體驗(yàn)。下面我們將介紹如何使用CSS創(chuàng)建這些小圖標(biāo)。

/* 定義通知圖標(biāo)的樣式 */
.notification-icon {
display: inline-block;
width: 30px;
height: 30px;
background-color: #f00;
border-radius: 50%;
text-align: center;
font-size: 20px;
color: #fff;
line-height: 30px;
}
/* 定義消息圖標(biāo)的樣式 */
.message-icon {
display: inline-block;
width: 30px;
height: 30px;
background-color: #0f0;
border-radius: 50%;
text-align: center;
font-size: 20px;
color: #fff;
line-height: 30px;
}

上面的代碼定義了兩個(gè)類(lèi)，一個(gè)是通知圖標(biāo)的樣式，另一個(gè)是消息圖標(biāo)的樣式。我們可以根據(jù)需要來(lái)使用這些類(lèi)。另外，我們還可以使用CSS偽元素來(lái)實(shí)現(xiàn)一些特殊效果，比如在通知圖標(biāo)上添加紅色的小圓點(diǎn)來(lái)表示有未讀通知。

/* 定義未讀通知圖標(biāo)的樣式 */
.notification-icon:after {
content: '';
display: inline-block;
width: 8px;
height: 8px;
background-color: #f00;
border-radius: 50%;
position: absolute;
right: -5px;
top: -2px;
}

上面的代碼定義了一個(gè)偽元素，將其添加到通知圖標(biāo)上，并設(shè)置其為小圓點(diǎn)的樣式。通過(guò)定位和調(diào)整其它樣式屬性，我們可以將其放置在通知圖標(biāo)的右上角。

總之，使用CSS來(lái)創(chuàng)建通知和消息小圖標(biāo)非常簡(jiǎn)單。只需要定義好其樣式，并根據(jù)需要添加一些特殊效果即可。