CSS寫對(duì)話框氣泡是前端開(kāi)發(fā)中一個(gè)比較常見(jiàn)的需求，特別是在在線聊天室、社交網(wǎng)絡(luò)等場(chǎng)合。下面我們就講一講如何使用CSS來(lái)寫出漂亮的對(duì)話框氣泡。

// 對(duì)話框氣泡的HTML代碼
Hello, World!
// CSS樣式代碼
.dialog {
position: relative;
display: inline-block;
padding: 10px;
background-color: #eee;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.dialog .arrow {
position: absolute;
width: 10px;
height: 10px;
background-color: #eee;
transform: rotate(45deg);
top: -5px;
left: 50%;
margin-left: -5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.dialog .content {
font-size: 16px;
}
.dialog:before {
content: "";
position: absolute;
top: -8px;
left: 50%;
margin-left: -8px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 8px 8px 8px;
border-color: transparent transparent #eee transparent;
}

以上代碼實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的對(duì)話框氣泡效果，其中.dialog類定義了氣泡框的樣式，.arrow類定義了氣泡框的尖角，.content類定義了氣泡框的內(nèi)容。使用:before偽類可以輕松實(shí)現(xiàn)氣泡框的三角效果。

需要注意的是，以上代碼實(shí)現(xiàn)的對(duì)話框氣泡是向上的，如果需要向下則只需要微調(diào).arrow類的top和:before偽類的top即可。