純CSS實現各類氣球泡泡對話方塊效果

文章目錄

• 一、關於純CSS實現氣泡對話方塊
• 二、“字元法”與“邊框法”
• 三、“邊框法”的進階應用程式
• 四、關於“邊框法”的一些說明
• 五、利用CSS3實現氣泡樣式的對話方塊
• 六、結語

by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=651

一、關於純CSS實現氣泡對話方塊

首先，來張大圖：

上邊這張黃黃的，大大的，圓圓的，有個小尾巴，文字內容有些YY的圖片，就是使用純CSS實現的氣泡對話方塊效果，一點圖片都沒有哦。看到這裡，你是 不是跟我一樣，有些驚歎CSS的潛力呢。關於這張圖片，暫時先放到一邊，下面我要講一些與主旨相關的比較重要的，同時又很實用的一些技術。

我們首先看下面這一張圖片（截自人人網）：

可能顏色有點淡，在左上方有個90度的尖角，於是整個形成了一個氣泡對話方塊。現在考考你，如果你來實現這個效果，你會怎麼做？//zxx:假設你已經思考了一會兒｡◕‿◕｡ 我想，如果您沒有看本文標題，可能就想到的是做個90度等腰三角形小圖片；就算您知道可以用CSS實現上面的效果，但是您知道是什麼方法嗎？當然，是絕對相容的方法（從已經在美國辦了隆重葬禮的IE6到很多人喜歡的Firefox和Safari）。您有主意嗎？

好，我們先來看看人人網是怎麼實現的，我們用小bug（//zxx:指firebug，我喜歡親切的稱之為“小bug”）看一看，原來也是使用的圖片，600*6像素的圖片，見：

查看此圖片點此連結：http://xnimg.cn/imgpro/box/box_arrow.png

這可是活生生的多了一次圖片請求啊，而且是個獨立的小圖片，關鍵是在訪問量驚人的首頁上。優秀與平庸的差異在哪裡呢？前者追求極致，後者追隨大流。

這裡的圖片完全沒有必要，使用CSS可以實現近乎一樣的效果，並且方法不止一種，我目前知道的有兩種方法可以實現上面人人網的氣泡對話方塊效果。我將這兩個方法自己定義為“邊框法”與“字元法”。

本文地址： http://www.zhangxinxu.com/wordpress/?p=651

二、“字元法”與“邊框法”

1. 字元法
關於“字元法”，其實在我的“告別圖片—使用字元實現相容性的圓角尖角效果beta版”一文中已經比較詳盡的提及過。

這裡再簡單講述下，世界上的語言多種多樣，字元的種類也是千差萬別，形狀也是千奇百怪，所以，有些字元就可以當作圖形來使用，以類比一些web表現 效果。例如，上面的人人網對話方塊尖角就可以使用棱形字元(◆)來實現，看到這個形狀上面的90度的尖角了嗎，我們可以讓其溢出div顯示，不就有了尖角效 果了嗎！定位可以使用margin負值或是absolute絕對位置。

在我的網站上就應用了這個方法，您可以在網站的“提問與交流”頁面看到類似所示的內容：

具體使用，您可以狠狠地點擊這裡：“字元法”實現氣泡對話方塊demo
裡面顯示了CSS與HTML代碼。

2. 邊框法
關於“邊框法”，這說起來話就長了。不急，慢慢來。
我們首先來看下面一段樣式代碼：

.test{width:10px; height:10px; border:10px solid; border-color:#ff3300 #0000ff #339966 #00ff00;}

當某個div應用了上面這個樣式後，結果會如何？見（截自Firefox3.5，IE瀏覽器有細節上的差異）：

仔細觀察邊框色的交界處，四個角落有4個45°的斜邊，將整個邊框分成了四個等腰梯形。

現在，設想一下，如果我們現在只保留一個一個上邊框，其餘邊框均transparent透明（或與背景色同色），那麼是不是就只顯示一個上面紅色的邊框了，我們測試下，與上面類似的代碼，只是修改下其餘三個邊框的顏色。

.test{width:10px; height:10px; border:10px solid; border-color:#ff3300 #ffffff #ffffff #ffffff;}

結果如（截自Firefox3.5）：

可見顯示結果正如我們預想的。現在，再次開動腦筋，試想下，如果上面樣式中的寬度和高度都是0，也就是width:10px; height:10px;變成了width:0; height:0;。對了，那麼顯示的將不會是個等腰梯形了，而是個等腰直角三角形。做個簡單測試就知道答案了，如下的代碼：

.test{width:0; height:0; border:10px solid; border-color:#ff3300 #ffffff #ffffff #ffffff;}

結果如下（依舊自Firefox3.5）：

此時，我們驚奇的發現，使用border屬性居然產生了一個等腰直角三角形，而這個等腰直角三角形用做氣泡對話方塊的尖角再合適不過了。所以，上面的人人網對話方塊的尖角就可以用border實現了，只要讓下邊框有顏色，其他透明（或與外背景同色）就好了。

關於“邊框法”實現的效果，您可以狠狠地點擊這裡：“邊框法”實現氣泡對話方塊demo，或參見。

還沒完，我們現在再開動我們智慧的大腦，設想下，如果各個邊框的寬度不一致，又會產生怎樣的結果呢？我們把測試代碼再修改一下，讓其邊框寬度不一致，如下：

.test{width:0; height:0; border-width:20px 10px; border-style:solid; border-color:#ff3300 #ffffff #ffffff #ffffff;}

得到的結果如：

可以發現，尖角被拉高了，也就是相鄰邊框寬度的比例會影響單個邊框形狀的高與低的比例，這不難理解。

現在，我們再開動一下我們的腦筋，如果我們讓相鄰兩個邊框顯示顏色會怎麼樣呢？測試一下吧，如下代碼：

.test{width:0; height:0; border-width:20px 10px; border-style:solid; border-color:#ff3300 #ff3300 #ffffff #ffffff;}

結果如：

這不就不多說什麼了，大伙兒都看到，上個相鄰邊框尖角實現的氣泡對話方塊效果吧。

本文地址： http://www.zhangxinxu.com/wordpress/?p=651

三、“邊框法”的進階應用程式

說是進階應用程式，準確講應該是“複雜應用”。就是說用兩個標籤（或無標籤 – 使用:before與:after偽類）形成的兩個不同的邊框進行組合顯示實現的一些效果。

看下面兩個圖，本單元就是要實現下面兩種效果：

1、效果(1)
CSS代碼如下：

.test{width:300px; padding:30px 20px; margin-left:60px; background:#beceeb; position:relative;}
.test span{width:0; height:0; font-size:0; overflow:hidden; position:absolute;}
.test span.bot{
    border-width:20px;
    border-style:solid;
    border-color:#ffffff #beceeb #beceeb #ffffff;
    left:-40px;
    top:40px;
}
.test span.top{
    border-width:10px 20px;
    border-style:dashed solid solid dashed;
    border-color:transparent #ffffff #ffffff transparent;
    left:-40px;
    top:60px;
}

HTML代碼如下：

<div class="test">
    <span class="bot"></span>
    <span class="top"></span>
    CSS “邊框法”實現氣泡對話方塊效果一
</div>

您可以狠狠地點擊這裡：效果(1)demo

2、效果(2)
CSS代碼如下：

.test{width:300px; padding:30px 20px; border:5px solid #beceeb; position:relative;}
.test span{width:0; height:0; font-size:0; overflow:hidden; position:absolute;}
.test span.bot{
    border-width:20px;
    border-style:solid dashed dashed;
    border-color:#beceeb transparent transparent;
    left:80px;
    bottom:-40px;
}
.test span.top{
    border-width:20px;
    border-style:solid dashed dashed;
    border-color:#ffffff transparent transparent;
    left:80px;
    bottom:-33px;
}                

HTML代碼如下：

<div class="test">
    <span class="bot"></span>
    <span class="top"></span>
    CSS “邊框法”實現氣泡對話方塊效果二
</div>

您可以狠狠地點擊這裡：效果(2)demo

3、效果原理簡述
原理的關鍵字就是“覆蓋”，另外一個邊框形成的尖角覆蓋之前的一個，只要控制好覆蓋的位置，然後就形成了實際上的不規則尖角或是尖角邊框。您還可以發揮您的創造力，實現更多其它的效果。

本文地址： http://www.zhangxinxu.com/wordpress/?p=651

四、關於“邊框法”的一些說明

關於“邊框法”，有一些知識必須要提一下。

1. IE6的奇偶bug
如果定位外框高度或是寬度為奇數，則IE6下，絕對位置元素的低定位和右定位會有1像素的誤差。所以，盡量保證外框的高度或寬度為偶數值。

2. IE6的空div莫名高度bug
IE6下，空div會有莫名的高度，也就是說height:0;不頂用，此時形成的尖角的實際占高於其他瀏覽器是有差異的。可使用font-size:0; + overflow:hidden;修複此問題。

3. IE6不支援實線邊框透明transparent屬性
IE6不支援實線邊框透明transparent屬性，當某邊框設定為transparent屬性，且有寬度的話，那麼透明會以預設的黑色顯示的。解決方 法有兩個，一是將需要隱藏的顏色設定為背景色，這樣與透明效果一樣，此法有局限性，在複雜“邊框法”應用下是行不通的；二是可以使用dashed代替 solid，可以實現IE6下邊框transparent透明。為什麼能夠實現透明？您可以參考默塵的這篇文章Dotted&Dashed終極分析及IE6透明邊框，我說點題外話，其對原因的解釋似乎說的通，但是，是不是如此，我是相當懷疑的，我尚未有時間驗證，這個可以標記一下。

本文地址： http://www.zhangxinxu.com/wordpress/?p=651

五、利用CSS3實現氣泡樣式的對話方塊

之前我們所說的一切，是全相容現在所有主流瀏覽器的。而這裡的方法，只支援對CSS3支援良好的瀏覽器，例如Firefox3.5+，chrome以及Safari。本文一開頭的那張黃黃的大圖就是使用的CSS3實現的圓形以及圓弧狀的拐角尾巴。

效果的核心就是CSS3的圓角屬性：border-radius，例如開始的大尾巴圖片，就是使用border-radius實現的三個圓組成的，大圓形成主體內容，兩個小一點的圓相互遮蓋，形成圓弧小尾巴，但這個不具體講，現在，以一個相對簡單點的例子做樣本。

CSS代碼如下：

.test{
    width:300px;
    padding:80px 20px;
    margin-left:100px;
    background:#beceeb;
    -webkit-border-top-left-radius:220px 120px;
    -webkit-border-top-right-radius:220px 120px;
    -webkit-border-bottom-right-radius:220px 120px;
    -webkit-border-bottom-left-radius:220px 120px;
    -moz-border-radius:220px / 120px;
    border-radius:220px / 120px;
    position:relative;
}
.test span{width:0; height:0; font-size:0; background:#beceeb; overflow:hidden; position:absolute;}
.test span.bot{
    width:30px;
    height:30px;
    -moz-border-radius:30px;
    -webkit-border-radius:30px;
    border-radius:30px;
    left:10px;
    bottom:-20px;
}
.test span.top{
    width:15px;
    height:15px;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius:15px;
    left:0px;
    bottom:-40px;
}

HTML代碼如下：

<div class="test">
    <span class="bot"></span>
    <span class="top"></span>
    CSS3 border-radius實現氣泡對話方塊效果
</div>

最後的效果如：

您可以狠狠地點擊這裡：效果(3)demo

六、結語

還是那句話，資曆有限，錯誤難免，所以如果您發現文章中有表述不準確或是有相關問題需要交流可以通過評論或是去這裡進行提問交流。

原創文章，轉載請註明來自張鑫旭-鑫空間-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=651

（本篇完）