CSS消息紅點的顯示是許多網站和應用程序中常見的一種特效。消息紅點通常用于提示用戶有未讀消息或有新的通知。那么，如何使用CSS實現消息紅點的顯示呢？

/* CSS代碼 */
.notification-badge {
background-color: red;
color: #fff;
font-size: 12px;
font-weight: bold;
padding: 5px 8px;
border-radius: 50%;
position: absolute;
top: -5px;
right: -5px;
z-index: 1;
}

上述CSS代碼使用了position屬性將消息紅點定位在父元素的右上角。border-radius屬性設置了邊框的圓角，使得消息紅點呈現出圓形。使用z-index屬性確保消息紅點顯示在其他元素之上。

在HTML中，可以將消息紅點添加到任何需要提示未讀消息的元素中，例如圖標、按鈕、導航菜單等。

2

在上述HTML代碼中，將消息紅點添加到了一個帶有圖標的錨鏈接中。通過添加一個span元素來實現紅點的顯示，并在其中放置未讀消息數量。由于使用了絕對定位，所以紅點不會影響其他元素的布局。

通過使用CSS的消息紅點，將可以為用戶提供更好的提示和反饋，增強用戶體驗。