對(duì)話氣泡是在網(wǎng)頁(yè)開(kāi)發(fā)中經(jīng)常用到的一種元素，它可以用來(lái)展示聊天記錄、提示信息等內(nèi)容。下面介紹一下如何使用 CSS 來(lái)制作對(duì)話氣泡。

/* 對(duì)話氣泡的 CSS 代碼 */
.bubble {
position: relative;
display: inline-block;
padding: 10px 20px;
background-color: #F5F5F5;
border-radius: 20px;
font-size: 16px;
line-height: 1.4;
}
.bubble::before {
content: '';
position: absolute;
top: 50%;
right: 100%;
margin-top: -10px;
border-style: solid;
border-width: 10px;
border-color: transparent #F5F5F5 transparent transparent;
}
.bubble::after {
content: '';
position: absolute;
top: 50%;
right: 100%;
margin-top: -8px;
border-style: solid;
border-width: 8px;
border-color: transparent #FFFFFF transparent transparent;
}

上面的 CSS 代碼包含了兩個(gè)偽元素，一個(gè)是 ::before，一個(gè)是 ::after，這兩個(gè)元素分別用來(lái)生成對(duì)話氣泡的左側(cè)箭頭和白色部分。通過(guò)設(shè)置偽元素的 border-color，可以輕松地修改氣泡的顏色。

將上面的代碼添加到 HTML 文件的 head 標(biāo)簽中即可使用對(duì)話氣泡。在需要使用氣泡的地方，添加一個(gè) div 元素，并為其添加 bubble 類名：

<div class="bubble">這是一段對(duì)話氣泡內(nèi)容</div>

使用這種方法制作的對(duì)話氣泡具有一定的可定制性，可以通過(guò) CSS 修改氣泡的顏色、邊框、字體等樣式。