純CSS氣泡對話框

2024-09-05 12:17:11

字體：大中小

供稿：網(wǎng)友

看了網(wǎng)上的文章后，自己動手寫了一個CSS對話框氣泡，其實在有些提示框中，經(jīng)常可以看到這種帶了貌似氣泡的形狀，用CSS實現(xiàn)的過程也并不算復(fù)雜，這個過程是讓您進(jìn)一步理解CSS布局編程的過程，總體來說，這個CSS氣泡對話框還是相當(dāng)實用的。

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>無標(biāo)題文檔</title><style>.org_box{width:500px; height:80px; line-height:40px; margin:40px auto; padding-left:2em; background:#F3961C;font-size:12px; position:relative; } .org_box_cor{ width:0; height:0; font-size:0;border-style:solid;overflow:hidden; position:absolute; }.cor1{border-width:20px;border-color:#f3961c transparent transparent transparent;left:60px; bottom:-40px;}.cor2{border-width:20px;border-color:transparent #f3961c transparent transparent;left:-40px; bottom:30px;}.cor3{border-width:20px;border-color:transparent transparent #f3961c transparent;left:80px; top:-40px;}.cor4{border-width:20px;border-color:transparent transparent transparent #f3961c;right:-40px; bottom:30px;}.cor5{border-width:20px 10px;border-color:#f3961c #f3961c transparent transparent;left:60px; bottom:-40px;}.cor6{border-width:20px 10px;border-color:#f3961c transparent #f00 transparent;left:-40px; bottom:30px;}.cor7{border-width:20px 10px;border-color:transparent #f3961c #f3961c transparent;left:80px; top:-40px;}.cor7{border-width:20px 10px;border-color:transparent #f3961c #f3961c transparent;left:80px; top:-40px;}.box1{height:40px;background:#000;position:relative;}.corner{width:0;height:0;font-size:0;border-width:20px 20px 20px;border-style:solid;border-color:#f00 transparent #f00 #f00  ;_border-color: #f00 white white white ;position:absolute;left:0;bottom:0;overflow:hidden;}</style></head><body><div   id="iwvjtn8m0"   class="org_box"> <span id="iwvjtn8m0"    class="org_box_cor cor1"></span>上邊框有顏色,所以箭頭沖下,定位的負(fù)值是邊框?qū)挾鹊?倍，寬度只有一個值，是等邊三角形.要專門給IE6寫HACK，將對應(yīng)的transparent改為white.（以下省略這句描述）。 </div><div   id="iwvjtn8m0"   class="org_box"> <span id="iwvjtn8m0"    class="org_box_cor cor2"></span>右邊框有顏色值,所以箭頭沖左 </div><div   id="iwvjtn8m0"   class="org_box"> <span id="iwvjtn8m0"    class="org_box_cor cor3"></span>下邊框有顏色,所以箭頭沖上</div><div   id="iwvjtn8m0"   class="org_box"> <span id="iwvjtn8m0"    class="org_box_cor cor4"></span>左邊框有顏色,所以箭頭沖右 </div><div   id="iwvjtn8m0"   class="org_box"> <span id="iwvjtn8m0"    class="org_box_cor cor5"></span>上，右有顏色值，（寬度有兩個值且不等，大家可以任意排列組合，圖案很豐富） </div><div   id="iwvjtn8m0"   class="org_box"> <span id="iwvjtn8m0"    class="org_box_cor cor6"></span>上，下顏色值（顏色值不一樣，有驚喜,沙漏？高腳杯）</div><div   id="iwvjtn8m0"   class="org_box"> <span id="iwvjtn8m0"    class="org_box_cor cor7"></span>右下有顏色值</div><p style="color:#f00;">三個顏色值，有時也能用上,同樣，改變顏色值順序，開口方向不同。</p><div   id="iwvjtn8m0"   class="box1"><em class="corner"></em>地方了宋德福</div></body></html>

上一篇：CSS3繪圖實例代碼

下一篇：CSS3圖片圓角+陰影特效