氣泡狀文字框，是一種很生動的網頁設計手段。
它可以用來表示使用者的發言。
也可以用來作為特定資訊的提示符。
***租借**netflix，還用它顯示碟片的詳細資訊。**
**
*現在假定有這樣一段**：
床前明月光，疑是地上霜。李白
我們希望通過氣泡框，產生一種視覺效果，將李白與詩句對應起來。
那麼，首先需要為詩句新增四個」鉤子」（handler）：
床前明月光，疑是地上霜。然後，為最外面的容器div.tl指定高度和寬度，使它形成乙個視覺方框：
.tl接著，為四個」鉤子」依次新增四個不同的圓角背景：
.tl最後，在」李白」前面加上三角形。.tr.bl
.br
p氣泡框就生成了。
這種方法的優點是所有瀏覽器都支援，缺點是比較麻煩，必須製作專門的，增加多餘的標籤，**的靈活性較小。
隨著css3的出現，現在有了更好的方法，不需要任何背景和多餘的標籤，就能生成漂亮的文字框。
請看新方法發明人nicolas gallagher製作的範例：
由於這種方法用到了css3，所以ie6不支援，ie7和ie8無法顯示圓角效果。其他瀏覽器的最新版本，都能夠正常顯示。
還是以前面的**為例。
床前明月光，疑是地上霜。第一步，生成基本的方框。
.bubble第二步，生成圓角。
.bubble第三步，製作線性漸變的效果。
.bubble第四步，在容器後面新增乙個空元素，並將長度和寬度都設為0。
.bubble:after第五步，指定這個空元素為塊級元素，並且四個邊框之中，只顯示上方的邊框，其他三個邊框，都設為透明。因為該元素的大小為0，所以它的每乙個邊框，都是乙個等腰三角形。
.bubble:after這時，已經可以看見這個三角形了（其實是乙個上邊框）。
第六步，指定空元素的定位方式為absolute。然後，以容器元素的左下角為基點，將空元素水平右移一定的距離（這裡是50畫素），再垂直下移兩個邊界的距離。（由於第五步將空元素的邊界設為15畫素，所以這裡就是下移30畫素。）
.bubble:after至此，乙個不需要任何背景和多餘標籤的氣泡框，就出現在我們眼前了。
靈活處理空元素的邊框，或者改變大小，或者生成圓角，或者將兩個空元素的邊框重疊，就會產生各種各樣的變化。具體的效果和**，請參考nicolas gallagher的範例頁。
（完）
氣泡聊天框
好久沒寫部落格了。今天給大家分享乙個氣泡聊天框。div speech div.speech before div.speech after div.speech right div.speech right before div.speech right after div.speech left ...
純CSS實現乙個氣泡框
實現原理 主要通過css的border color屬性，結合 before after和position absolute實現。1 畫乙個正方形或長方形的盒子，別忘記此盒子需加上position relative，不然之後的絕對定位元素會相對於其餘設了position relative的父級元素或w...
CSS實現氣泡框，太強了胸弟！！
有個需求，弄乙個簡單的氣泡框，網上大把教程，看下實現後是長什麼樣子 直接貼 了，沒什麼好說的，css content my popover father collect title collect type collect type box my popover my popover inner t...