一、關(guān)于純CSS實(shí)現(xiàn)氣泡對(duì)話框

首先，來(lái)張大圖：

上邊這張黃黃的，大大的，圓圓的，有個(gè)小尾巴，文字內(nèi)容有些YY的圖片，就是使用純CSS實(shí)現(xiàn)的氣泡對(duì)話框效果，一點(diǎn)圖片都沒有哦?？吹竭@里，你是不是跟我一樣，有些驚嘆CSS的潛力呢。關(guān)于這張圖片，暫時(shí)先放到一邊，下面我要講一些與主旨相關(guān)的比較重要的，同時(shí)又很實(shí)用的一些技術(shù)。

我們首先看下面這一張圖片（截自人人網(wǎng)）：

可能顏色有點(diǎn)淡，在左上角有個(gè)90度的尖角，于是整個(gè)形成了一個(gè)氣泡對(duì)話框?，F(xiàn)在考考你，如果你來(lái)實(shí)現(xiàn)這個(gè)效果，你會(huì)怎么做？//zxx:假設(shè)你已經(jīng)思考了一會(huì)兒????? 我想，如果您沒有看本文標(biāo)題，可能就想到的是做個(gè)90度等腰三角形小圖片；就算您知道可以用CSS實(shí)現(xiàn)上面的效果，但是您知道是什么方法嗎？當(dāng)然，是絕對(duì)兼容的方法。您有主意嗎？

好，我們先來(lái)看看人人網(wǎng)是怎么實(shí)現(xiàn)的，我們用bug（//zxx:指firebug，我喜歡親切的稱之為“bug”）看一看，原來(lái)也是使用的圖片，600*6像素的圖片，見下圖：

查看此圖片點(diǎn)此鏈接：http://xnimg.cn/imgpro/box/box_arrow.png

這可是活生生的多了一次圖片請(qǐng)求啊，而且是個(gè)獨(dú)立的小圖片，關(guān)鍵是在訪問量驚人的首頁(yè)上。優(yōu)秀與平庸的差異在哪里呢？前者追求極致，后者追隨大流。

這里的圖片完全沒有必要，使用CSS可以實(shí)現(xiàn)近乎一樣的效果，并且方法不止一種，我目前知道的有兩種方法可以實(shí)現(xiàn)上面人人網(wǎng)的氣泡對(duì)話框效果。我將這兩個(gè)方法自己定義為“邊框法”與“字符法”。

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

1. 字符法
關(guān)于“字符法”，其實(shí)在我的“告別圖片—使用字符實(shí)現(xiàn)兼容性的圓角尖角效果beta版”一文中已經(jīng)比較詳盡的提及過(guò)。

這里再簡(jiǎn)單講述下，世界上的語(yǔ)言多種多樣，字符的種類也是千差萬(wàn)別，形狀也是千奇百怪，所以，有些字符就可以當(dāng)作圖形來(lái)使用，以模擬一些web表現(xiàn)效果。例如，上面的人人網(wǎng)對(duì)話框尖角就可以使用棱形字符(◆)來(lái)實(shí)現(xiàn)，看到這個(gè)形狀上面的90度的尖角了嗎，我們可以讓其溢出div顯示，不就有了尖角效果了嗎！定位可以使用margin負(fù)值或是absolute絕對(duì)定位。

在我的網(wǎng)站上就應(yīng)用了這個(gè)方法，您可以在網(wǎng)站的“提問與交流”頁(yè)面看到類似下圖所示的內(nèi)容：

具體使用：“字符法”實(shí)現(xiàn)氣泡對(duì)話框demo
里面顯示了CSS與HTML代碼。

2. 邊框法
關(guān)于“邊框法”，這說(shuō)起來(lái)話就長(zhǎng)了。不急，慢慢來(lái)。
我們首先來(lái)看下面一段樣式代碼：

當(dāng)某個(gè)div應(yīng)用了上面這個(gè)樣式后，結(jié)果會(huì)如何？見下圖（截自Firefox3.5，IE瀏覽器有細(xì)節(jié)上的差異）：

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

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

結(jié)果如下圖（截自Firefox3.5）：

可見顯示結(jié)果正如我們預(yù)想的?，F(xiàn)在，再次開動(dòng)腦筋，試想下，如果上面樣式中的寬度和高度都是0，也就是width:10px; height:10px;變成了width:0; height:0;。對(duì)了，那么顯示的將不會(huì)是個(gè)等腰梯形了，而是個(gè)等腰直角三角形。做個(gè)簡(jiǎn)單測(cè)試就知道答案了，如下的代碼：

結(jié)果如下（依舊截圖自Firefox3.5）：

此時(shí)，我們驚奇的發(fā)現(xiàn)，使用border屬性居然產(chǎn)生了一個(gè)等腰直角三角形，而這個(gè)等腰直角三角形用做氣泡對(duì)話框的尖角再合適不過(guò)了。所以，上面的人人網(wǎng)對(duì)話框的尖角就可以用border實(shí)現(xiàn)了，只要讓下邊框有顏色，其他透明（或與外背景同色）就好了。

關(guān)于“邊框法”實(shí)現(xiàn)的效果：“邊框法”實(shí)現(xiàn)氣泡對(duì)話框demo，或參見下圖。

還沒完，我們現(xiàn)在再開動(dòng)我們智慧的大腦，設(shè)想下，如果各個(gè)邊框的寬度不一致，又會(huì)產(chǎn)生怎樣的結(jié)果呢？我們把測(cè)試代碼再修改一下，讓其邊框?qū)挾炔灰恢?，如下?/p>

得到的結(jié)果如下圖：

可以發(fā)現(xiàn)，尖角被拉高了，也就是相鄰邊框?qū)挾鹊谋壤龝?huì)影響單個(gè)邊框形狀的高與低的比例，這不難理解。

現(xiàn)在，我們?cè)匍_動(dòng)一下我們的腦筋，如果我們讓相鄰兩個(gè)邊框顯示顏色會(huì)怎么樣呢？測(cè)試一下吧，如下代碼：

結(jié)果如下圖：

這不就不多說(shuō)什么了，大伙兒都看到，上個(gè)相鄰邊框尖角實(shí)現(xiàn)的氣泡對(duì)話框效果吧。

三、“邊框法”的高級(jí)應(yīng)用

說(shuō)是高級(jí)應(yīng)用，準(zhǔn)確講應(yīng)該是“復(fù)雜應(yīng)用”。就是說(shuō)用兩個(gè)標(biāo)簽（或無(wú)標(biāo)簽 – 使用:before與:after偽類）形成的兩個(gè)不同的邊框進(jìn)行組合顯示實(shí)現(xiàn)的一些效果。

看下面兩個(gè)圖，本單元就是要實(shí)現(xiàn)下面兩種效果：

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

效果(1)demo

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

效果(2)demo

3、效果原理簡(jiǎn)述
原理的關(guān)鍵字就是“覆蓋”，另外一個(gè)邊框形成的尖角覆蓋之前的一個(gè)，只要控制好覆蓋的位置，然后就形成了實(shí)際上的不規(guī)則尖角或是尖角邊框。您還可以發(fā)揮您的創(chuàng)造力，實(shí)現(xiàn)更多其它的效果。

四、關(guān)于“邊框法”的一些說(shuō)明

關(guān)于“邊框法”，有一些知識(shí)必須要提一下。

1. IE6的奇偶bug
如果定位外框高度或是寬度為奇數(shù)，則IE6下，絕對(duì)定位元素的低定位和右定位會(huì)有1像素的誤差。所以，盡量保證外框的高度或?qū)挾葹榕紨?shù)值。

2. IE6的空div莫名高度bug
IE6下，空div會(huì)有莫名的高度，也就是說(shuō)height:0;不頂用，此時(shí)形成的尖角的實(shí)際占高于其他瀏覽器是有差異的?？墒褂胒ont-size:0; + overflow:hidden;修復(fù)此問題。

3. IE6不支持實(shí)線邊框透明transparent屬性
IE6不支持實(shí)線邊框透明transparent屬性，當(dāng)某邊框設(shè)置為transparent屬性，且有寬度的話，那么透明會(huì)以默認(rèn)的黑色顯示的。解決方法有兩個(gè)，一是將需要隱藏的顏色設(shè)置為背景色，這樣與透明效果一樣，此法有局限性，在復(fù)雜“邊框法”應(yīng)用下是行不通的；二是可以使用dashed代替solid，可以實(shí)現(xiàn)IE6下邊框transparent透明。為什么能夠?qū)崿F(xiàn)透明？您可以參考默塵的這篇文章Dotted&Dashed終極分析及IE6透明邊框，我說(shuō)點(diǎn)題外話，其對(duì)原因的解釋似乎說(shuō)的通，但是，是不是如此，我是相當(dāng)懷疑的，我尚未有時(shí)間驗(yàn)證，這個(gè)可以標(biāo)記一下。

五、利用CSS3實(shí)現(xiàn)氣泡樣式的對(duì)話框

之前我們所說(shuō)的一切，是全兼容現(xiàn)在所有主流瀏覽器的。而這里的方法，只支持對(duì)CSS3支持良好的瀏覽器，例如Firefox3.5+，chrome以及Safari。本文一開頭的那張黃黃的大圖就是使用的CSS3實(shí)現(xiàn)的圓形以及圓弧狀的拐角尾巴。

效果的核心就是CSS3的圓角屬性：border-radius，例如開始的大尾巴圖片，就是使用border-radius實(shí)現(xiàn)的三個(gè)圓組成的，大圓形成主體內(nèi)容，兩個(gè)小一點(diǎn)的圓相互遮蓋，形成圓弧小尾巴，但這個(gè)不具體講，現(xiàn)在，以一個(gè)相對(duì)簡(jiǎn)單點(diǎn)的例子做示例。

CSS代碼如下：

最后的效果如下圖：

效果(3)demo

六、結(jié)語(yǔ)

還是那句話，資歷有限，錯(cuò)誤難免，所以如果您發(fā)現(xiàn)文章中有表述不準(zhǔn)確或是有相關(guān)問題需要交流可以通過(guò)評(píng)論或是去這里進(jìn)行提問交流。

最新評(píng)論