紅點氣泡是一種常見的UI元素，用于提醒用戶有新消息或未讀通知。在CSS中，可以用一些簡單的代碼和技巧輕松實現一個紅點氣泡。下面我們就看看如何實現這個效果。

/* 定義紅點氣泡的樣式 */
.badge {
display: inline-block; /* 行內塊元素 */
position: relative; /* 通過定位實現氣泡效果 */
width: 20px; /* 氣泡寬度 */
height: 20px; /* 氣泡高度 */
border-radius: 50%; /* 將氣泡變成圓形 */
background-color: red; /* 背景顏色為紅色 */
color: white; /* 字體顏色為白色 */
text-align: center; /* 文字居中 */
font-size: 14px; /* 字體大小 */
font-weight: bold; /* 字體加粗 */
}
/* 設置氣泡內的數字 */
.badge::after {
content: attr(data-badge); /* 獲取data-badge屬性值 */
position: absolute; /* 相對于父元素定位 */
top: -8px; /* 上側留8px的空白 */
right: -8px; /* 右側留8px的空白 */
padding: 2px 4px; /* 內邊距，控制數字和邊框之間的距離 */
border-radius: 50%; /* 將數字形狀變為圓形 */
background-color: white; /* 背景為白色 */
color: red; /* 數字顏色為紅色 */
font-size: 12px; /* 字體大小為12px */
font-weight: normal; /* 字體不加粗 */
box-shadow: 0 0 1px #333; /* 增加陰影效果 */
}

以上代碼中，我們首先定義了一個名稱為“badge”的類，這個類代表的是我們的紅點氣泡元素。我們給這個元素設置了一些基本的屬性，如寬度、高度、背景顏色等等。同時，我們將這個元素設置為行內塊元素，并通過相對定位實現了氣泡效果。

接下來，我們通過“::after”偽元素，將數字“值”動態綁定到氣泡元素上。這個數字所對應的數據是通過“data-badge”屬性來定義的。我們將這個數字定位在氣泡元素的右上角，并設置一些樣式，使其看起來像是一個獨立的數字標記。

綜上所述，一個帶有紅點氣泡的UI元素就完成了。你可以將這個元素應用到你的項目中，用于提醒用戶有新消息等等。