對話氣泡是在網頁開發中經常用到的一種元素，它可以用來展示聊天記錄、提示信息等內容。下面介紹一下如何使用 CSS 來制作對話氣泡。

/* 對話氣泡的 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 代碼包含了兩個偽元素，一個是 ::before，一個是 ::after，這兩個元素分別用來生成對話氣泡的左側箭頭和白色部分。通過設置偽元素的 border-color，可以輕松地修改氣泡的顏色。

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

<div class="bubble">這是一段對話氣泡內容</div>

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