在實現評論及回覆功能時，考慮可以讓大家選擇一個皮膚，讓評論區域顯得不那麼單調，具體效果可以參考百度貼吧和QQ的聊天界面。本文給出了一種採用CSS Sprites的實現方式，氣泡可以做到寬度和高度的自適應擴展。
本例中用到的氣泡圖案來自QQ，此處僅用於交流學習。
需求描述
基本要求就是希望可以實現一個類似QQ聊天氣泡的效果，做到寬度和高度的自適應擴展。此外，最好可以實現方便的皮膚選擇，使得氣泡可以應用多種樣式，以使界面更豐富多彩。
本文實現樣例展示
氣泡自適應的寬度和高度
多種皮膚效果展示
實現思路
對於自適應的寬度和高度，普通的行內元素即可實現。爲了實現豐富的氣泡，不得不使用背景圖片，我們首先來觀察一個氣泡，可以發現一個氣泡基本上可以分爲9個部分，如下圖所示：
爲了方便描述，我們對這些區域進行編號爲0-8，其中淺藍色部分（1/3/5/9）爲相對固定不變的區域，淺黃色部分（2/4/6/8）爲自動擴展的部分（其高度或者寬度需要擴展），淺紅色區域（區域0）爲顯示文本的區域。實際上，這與Android APP開發中常用的9-patch圖片的原理是類似的。
爲了實現自適應的氣泡，我們首先需要對這9個區域進行正確的定位。通過CSS的相對和絕對定位可以達到這個目的。簡單來說，區域0的寬度和高度自動擴展，包裹0-8這所有9個區域的元素（假設爲wrapper）的寬度和高度也自動擴展，同時wrapper的position設爲relative，並把1-8元素的position設爲absolute。這樣即可以做到寬度和高度的自適應，以及各區域的正確定位。
實現了各區域的定位後，對各區域進行設定背景即可。其中1/3/5/7使用圖片作背景，2/4/6/8既可以使用圖片，也可以僅使用CSS設定背景和邊框顏色（根據實現的難易程度來選擇具體實現方式）。爲了減少對服務器的圖片請求次數，考慮使用CSS Sprites技術。而對於多種皮膚的實現，在不同class下應用不同的樣式，調整背景圖即可。
關鍵代碼
DOM結構
首先，給出代碼結構如下（僅供參考），此處使用className：left和right來區分聊天氣泡的位置（界面左側還是右側），使用一個className來確定使用的皮膚（以下代碼中是bubble-bear），替換該值可選用其他的皮膚。
<ul class="chat-list">
<li class="chat-item left">
<img src="img/avatar-1.jpg" class="chat-avatar"/>
<div class="bubble-item bubble-bear">
<span class="chat-content">我是萌萌的左邊小熊</span>
<span class="cell cell-1"></span>
<span class="cell cell-2"></span>
<span class="cell cell-3"></span>
<span class="cell cell-4"></span>
<span class="cell cell-5"></span>
<span class="cell cell-6"></span>
<span class="cell cell-7"></span>
<span class="cell cell-8"></span>
</div>
</li>
<!-- more -->
</ul>CSS
/* 氣泡的position設爲relative，方便其子元素的定位 */
.bubble-item {
position: relative;
}
/* 子元素的position設爲absolute，方便其定位到父元素 */
.cell {
position: absolute;
}
/* 設定背景圖（CSS Sprites） */
.bubble-bear .cell-1,
.bubble-bear .cell-3,
.bubble-bear .cell-5,
.bubble-bear .cell-7 {
background: url(../img/bubbles.png) no-repeat;
}
/* 內容區域，防止被其他區域遮擋 */
.chat-content {
position: relative;
z-index: 10;
}
/**
* 以下是小熊左側的實現代碼
*/
/* 區域0（內容區域）的邊距及背景顏色等 */
.left .bubble-bear .chat-content {
margin: 17px 32px 15px 18px;
display: inline-block;
background-color: #fff8ef;
}
/* 區域1（左上角）的定位、大小設置、背景圖位置設置 */
.left .bubble-bear .cell-1 {
left: 0;
top: 6px;
width: 20px;
height: 20px;
background-position: -3px -10px;
}
/* 區域2（上邊）的定位、大小設置、背景及邊框顏色 */
.left .bubble-bear .cell-2 {
left: 20px;
top: 11px;
right: 20px;
height: 16px;
background-color: #fff8ef;
border-top: 1px solid #835426;
}
/* 區域3（右上角）的定位、大小設置、背景圖位置設置 */
.left .bubble-bear .cell-3 {
right: 0;
top: 0;
width: 60px;
height: 28px;
background-position: -58px -4px;
}
/* 區域4（右邊）的定位、大小設置、背景及邊框顏色 */
.left .bubble-bear .cell-4 {
top: 28px;
right: 6px;
bottom: 10px;
width: 60px;
background-color: #fff8ef;
border-right: 1px solid #835426;
}
/* 區域5（右下角）的定位、大小設置、背景圖位置設置 */
.left .bubble-bear .cell-5 {
right: 0;
bottom: 0;
width: 60px;
height: 16px;
background-position: -58px -50px;
}
/* 區域6（下邊）的定位、大小設置、背景及邊框顏色 */
.left .bubble-bear .cell-6 {
right: 60px;
bottom: 6px;
left: 20px;
height: 10px;
background-color: #fff8ef;
border-bottom: 1px solid #835426;
}
/* 區域7（左下角）的定位、大小設置、背景圖位置設置 */
.left .bubble-bear .cell-7 {
left: 0;
bottom: 0;
width: 20px;
height: 20px;
background-position: -3px -46px;
}
/* 區域8（左邊）的定位、大小設置、背景及邊框顏色 */
.left .bubble-bear .cell-8 {
top: 25px;
bottom: 20px;
left: 4px;
width: 20px;
background-color: #fff8ef;
border-left: 1px solid #835426;
}另一側（即右側）的樣式與左側類似，此處不再詳舉。其他皮膚的實現方式也與此相同，只是需要根據背景圖來調整CSS裏各屬性的值（主要爲定位相關的值top/right/bottom/left，大小相關的值width/height，背景及邊框顏色，background-position等）。
完整代碼
完整代碼見 Github。您還可以在原文的評論區域找到此種實現方案的具體應用。
// www.sfg.name
// [email protected]
// 2016/9/6