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

抄自http://www.zhangxinxu.com/wordpress/?p=651

邊框法

我們首先來看下面一段樣式代碼：

.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屬性居然產生了一個等腰直角三角形，而這個等腰直角三角形用做氣泡對話框的尖角再合適不過了。

“邊框法”實現氣泡對話框demo

HTML代碼：

 

<div class="org_box">
    <span class="org_bot_cor"></span>
    邊框法實現底部90度尖角對話框
</div>

css代碼：

.org_box{
    height:80px;
    line-height:80px; 
    margin-bottom:30px; 
    padding-left:2em;
    background:#F3961C; 
    position:relative; 
}
.org_bot_cor{
    width:0; 
    height:0; 
    font-size:0; 
    border-width:15px; 
    border-style:solid; 
    border-color:#f3961c transparent transparent; 
    _border-color:#f3961c white white; 
    overflow:hidden; 
    position:absolute; 
    left:60px; 
    bottom:-30px;
}

效果如下：

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

.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;}

結果如下圖：

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

“邊框法”的高級應用

說是高級應用，准確講應該是“復雜應用”。就是說用兩個標簽（或無標簽 – 使用: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>

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>

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

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

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

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透明。