在網頁設計中，對話泡泡是一種經常出現的圖形。通過使用CSS，我們可以很容易地創建漂亮的對話泡泡。下面我們來看一下如何使用CSS寫對話泡泡。

.bubble {
position: relative;
background-color: #e1e1e1;
border-radius: 10px;
padding: 10px;
}
.bubble:before {
content: "";
position: absolute;
border-style: solid;
border-width: 10px;
border-color: #e1e1e1 transparent transparent transparent;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
}

該代碼塊中的CSS類名“bubble”定義了對話泡泡的樣式。position:relative設置容器為相對定位，background-color定義背景顏色，border-radius添加圓角。padding添加指定像素的內邊距。

接下來，在偽類:before中，我們使用CSS畫一個三角形作為對話泡泡的“尾巴”。content屬性指定為“空”，以確保偽類顯示在對話泡泡前面而不加在內容中。 border-style定義邊框樣式為實線，border-width指定邊框寬度，border-color給出一個銀色輪廓并利用透明度覆蓋三角形一側，以便對話泡泡看起來更加生動。bottom和left屬性確定偽類的位置，并通過transform屬性定位在水平中心點上方。

現在，我們可以給HTML中的任何元素添加“bubble”類，并得到一個漂亮的對話泡泡。例如，

你好，這是一個對話泡泡。

將呈現出如下效果：

你好，這是一個對話泡泡。

如您所見，我們可以通過CSS快速輕松地創建出漂亮的對話泡泡。現在，您可以為您的網站的聊天交互設計實現此視覺效果。