這篇文章給大家一步步介紹使用純CSS製作簡單氣泡對話框的方法。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。
用氣泡框圖片直接插入即可，但是，圖片每次都需要加載，可以用CSS來實現！
首先，我得弄清楚，氣泡框是怎麼實現的。知道了原理之後就可以無限變通啦！ ！ ！ ！
先來一個基本的氣泡框圖！
第一步，首先要有個方塊！很簡單，一個div就可以囉！然後對其div設定相對定位。
HTML：
<div class="div"></div>
CSS:
.div{
width: 200px;
height: 100px;
border: 2px solid #ff0;
position: relative;
}如圖，這是一個框，基本的形狀就有啦！
接著，最關鍵的，就是如何實現三角形部分啦~
在先前得搞明白，三角形是怎麼來的？
在這裡，我先舉一個例子，來解析一下！ ！ ！ ！
來看看下圖。一步一步來！ ！ ！
HTML:
<p>1.下面是一个div.长宽为50*50的正方形，边框宽度为50</p> <div class="div1"></div>
CSS:
.div1{
width: 50px;
height: 50px;
border: 50px solid;
border-color: yellow skyblue pink deeppink;
}效果圖：我們可以看到邊框為50px的時候，已經呈現梯形了對不對？
接下來，把正方形的寬高都設為0，只剩下50px的邊框，我們來看看效果圖，是不是出現了四個三角形？是的，邊框已經沒有再包裝任何東西了。只剩下邊框它本身了。
我們取上邊框，剩下的三邊都顏色設為透明！
是不是知道三角形從何而來了呢？
我們回到氣泡框，只要要把三角形定位到長方形的框框下面，氣泡框就基本上成型啦！ ！
CSS：在div之前插入此樣式！用::before 就ok!!! 對其絕對定位！把上邊框顏色設為：#ff0，左右邊框為透明色，下邊框為透明色
.div::before{
content: '';
width: 0;
height: 0;
border: 20px solid;
position: absolute;
bottom: -40px;
left: 140px;
border-color: #ff0 transparent transparent;
}結果圖：
好了，大概的樣子有了，咦！ ！ ！是不是還差一點點呢？喔！原來三角形處應該是空心的，而非實心三角形呀！ ！那麼，在div元素之後插入一個同樣的三角形，背景色為白色，蓋在原有的黃色三角形不就可以了麼？好的，來看看！ ！ ！
CSS:
.div::after{
content: '';
width: 0;
height: 0;
border: 20px solid;
position: absolute;
bottom: -36px;
left: 140px;
border-color: #fff transparent transparent;
}效果圖：
# 完成之後，是不是有點突兀，再給氣泡框加個圓角把！ ！ ！
css:
.div{
width: 200px;
height: 100px;
border: 2px solid #ff0;
border-radius: 7px; /*圆角弧度为7px*/
position: relative;
}
也可以自己設定一個有填滿色的氣泡框！ ！ ！很簡單，就不上程式碼啦！ ！
好啦，大功告成啦！一個基本的氣泡框，就已經完成囉！ ！ ！ ！
更多程式相關知識，請造訪：程式設計教學！ ！
以上是純CSS製作一個簡單氣泡對話框（圖文詳解）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
