氣泡對話框在網頁中經常用于說明提示等功能，可以形象生動的現實一些需要用戶注意的文字與內容，本文介紹僅用CSS來實現這種簡單的網頁效果。

氣泡狀文本框，是一種很生動的網頁設計手段。

它可以用來表示用戶的發言。

也可以用來作為特定信息的提示符。

DVD租借網站Netflix，還用它顯示碟片的詳細信息。

=========================

制作CSS氣泡框的傳統方法，需要5張背景圖片，分別是：

　　* tl.gif，左上方的圓角。
　　* tr.gif，右上方的圓角。
　　* bl.gif，左下方的圓角。
　　* br.gif，右下方的圓角。
　　* angle.gif，突出的三角形。

現在假定有這樣一段代碼：

我們希望通過氣泡框，產生一種視覺效果，將李白與詩句對應起來。

那么，首先需要為詩句添加四個“鉤子”（handler）：

然后，為最外面的容器div.tl指定高度和寬度，使它形成一個視覺方框：

接著，為四個“鉤子”依次添加四個不同的圓角背景：

最后，在“李白”前面加上三角形圖片。

氣泡框就生成了。

這種方法的優點是所有瀏覽器都支持，缺點是比較麻煩，必須制作專門的圖片，增加多余的標簽，代碼的靈活性較小。

============================

隨著CSS3的出現，現在有了更好的方法，不需要任何背景圖片和多余的標簽，就能生成漂亮的文本框。

請看新方法發明人Nicolas Gallagher制作的范例：

由于這種方法用到了CSS3，所以IE6不支持，IE7和IE8無法顯示圓角效果。其他瀏覽器的最新版本，都能夠正常顯示。

還是以前面的代碼為例。

第一步，生成基本的方框。

第二步，生成圓角。

第三步，制作線性漸變的效果。

第四步，在容器后面添加一個空元素，并將長度和寬度都設為0。

第五步，指定這個空元素為塊級元素，并且四個邊框之中，只顯示上方的邊框，其他三個邊框，都設為透明。因為該元素的大小為0，所以它的每一個邊框，都是一個等腰三角形。

這時，已經可以看見這個三角形了（其實是一個上邊框）。

第六步，指定空元素的定位方式為absolute。然后，以容器元素的左下角為基點，將空元素水平右移一定的距離（這里是50像素），再垂直下移兩個邊界的距離。（由于第五步將空元素的邊界設為15像素，所以這里就是下移30像素。）

至此，一個不需要任何背景圖片和多余標簽的氣泡框，就出現在我們眼前了。

靈活處理空元素的邊框，或者改變大小，或者生成圓角，或者將兩個空元素的邊框重疊，就會產生各種各樣的變化。具體的效果和代碼，請參考Nicolas Gallagher的范例頁。

  Tag: 設計公司 | 網頁設計公司 | 廣告公司 | 網站設計 | 平面設計 | 互動媒體 | 網頁設計 | Web design | Website design | design house | 媒體公司 | Iphone app | 程式設計 | Flash 網頁 | Flash game | 動畫設計 | 後期製作 | 網上商店 | 網上宣傳 | 網頁服務 |