氣泡是 Web 開發中常用的一種效果，可以在頁面上方便地彈出一些提示信息或者操作選項。利用 CSS 可以很方便地實現氣泡效果，下面我們來看看利用 CSS 實現氣泡的方法。

.bubble {
position: relative;
padding: 10px;
background-color: #fff;
color: #333;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.bubble::before {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -10px;
border-width: 10px;
border-style: solid;
border-color: transparent transparent #fff transparent;
}
.bubble::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -8px;
border-width: 8px;
border-style: solid;
border-color: transparent transparent #333 transparent;
}

上面的代碼中，我們首先定義了一個類名為 ".bubble" 的樣式，這個樣式用來設置整個氣泡的樣式，包括背景顏色、內邊距、圓角和陰影。接著我們使用 "::before" 和 "::after" 偽元素來分別添加上三角箭頭和陰影邊框，從而形成氣泡效果。

其中，"::before" 偽元素用來實現白色三角箭頭的位置和樣式，"bottom: 100%" 表示這個箭頭要出現在氣泡下方，"left: 50%" 表示這個箭頭的左邊緣要與氣泡的中心點重合，"margin-left: -10px" 表示這個箭頭整體向左偏移 10px，從而使得箭頭位于氣泡的正中央。

"border-color" 屬性用來設置邊框的顏色，我們這里將左右兩側和下側設置為透明，上側設置為白色，從而形成了白色箭頭的效果。同理，我們使用 "::after" 偽元素來設置黑色的邊框，這就實現了整個氣泡的效果。