气泡提示效果css.html,用纯CSS3绘制高端简约的气泡提示框
用純css繪制一個簡單的氣泡提示框，對于長期關注課課家CSS3繪圖教程的朋友來說是件輕而易舉的事，但是程序員最不喜歡做的事情是重復造輪子，加上之前小編分享的幾個氣泡要么過于復雜，通用性不強，要么需要鼠標移上才顯示，移植也不方便。所以今天小編來整理一份更純粹的氣泡提示框代碼。
氣泡提示由一個圓角矩形和一個三角形組成，其中三角形可以利用before或after偽元素來插入。那么，每個提示框在html里面都只需要一個元素了。
我們來看看基礎的html代碼:
可見每個氣泡都只用了一個div元素，三角形箭頭部分我們用before偽元素即可。
四個氣泡的樣式非常接近，不同的只是三角形的位置，為此我們可以定義公共的部分。但是這里沒有共用的類名啊，那該怎么弄呢？
我們發現這4個類都以tip-bubble開頭，而CSS提供了一個屬性選擇器，可以讓我們進行模糊匹配。
要實現匹配開頭等于固定內容的選擇器，我們可以這樣寫。
[class^=tip-bubble]
其中^=代表匹配開頭，具體內容為tip-bubble。
下面我們就來為這個選擇器定義一些公共的樣式。首先，三角形和圓角矩形從某種意義上說是重合的，因此內部元素(包括偽元素)要使用絕對定位。所以整個div要設置為相對定位，讓內部元素的位置以div的左上角作為參考點。然后再設置圓角半徑、背景顏色、邊距、寬高、字體等公共樣式。
[class^=tip-bubble]{
display:inline-block;
position:relative;
background-color:#202020;
width:120px;
padding:20px;
color:#CCC;
text-align:center;
font-size:14px;
font-family:微軟雅黑;
border-radius:10px;
margin:50px;
}
運行效果如下圖所示:
感覺少了點層次感，我們用CSS3的box-shadow屬性給氣泡加個投影看看。
當然了，提示框的立體感不宜太強，所以跟原始圖形錯開1個像素就足夠了。
[class^=tip-bubble]{
/*其它樣式代碼省略*/
box-shadow:1px 1px 2px #202020;
-o-box-shadow:1px 1px 2px #202020;
-moz-box-shadow:1px 1px 2px #202020;
-webkit-border-shadow:1px 1px 2px #202020;
}
4行代碼功能一致，不同前綴用于兼容不同的瀏覽器。
以第一行為例，1px 1px 2px #202020代表的是水平和垂直方向都錯開1像素，大小為2像素的深灰色(#202020)陰影。4個屬性用英文空格分隔，分別代表x方向偏移，y方向偏移，陰影大小和陰影顏色。
運行效果如下圖所示:
現在層次感好多了，我們用before偽元素加入三角形箭頭看看。
有關注本站《CSS3基本形狀匯總》的朋友對三角形的繪制應該不陌生，方法是利用邊框的轉角實現，只要邊框設置得足夠粗，那么轉角部分就足以讓我們完成三角形的繪制了。
本案例不再詳解三角形的實現原理，不過大家要是忘了的話，就可以重溫下面的原理圖。
4個氣泡都是繪制三角形，不同的只是位置和角度的區別。所以繪制三角形的部分仍然可以作為公共樣式定義到[class^=tip-bubble]的before偽元素中。然后，我們也該用絕對定位了。
[class^=tip-bubble]:before{
content:'';
position:absolute;
width:0;
height:0;
border:15px solid;
}
因為只用到邊框，所以width和height都設置為0。
運行效果如下圖所示:
偽元素把氣泡提示給“挖空”了(實際上是文字顏色)。因為width和height都等于0，所以被挖空的部分實際上都是由邊框構成的，結構如下圖所示，不難發現它就是4個三角形。
現在我們要為氣泡提示補上三角形。以左箭頭為例，我們要取的是右邊框，所以我們給右邊框(border-right)設置跟氣泡背景一樣的顏色。
這次我們就寫在tip-bubble-left類上了。
.tip-bubble-left:before{
border-right-color:#202020;
}
運行效果如下圖所示:
現在我們要把箭頭移到提示框的左側，但不難想象，如果背景顏色跟字體顏色不一致，那移到左邊以后就一定會顯示出一個被切掉一個角的小色塊，所以我們應該先讓before偽元素的字體顏色變成全透明。你可以使用CSS3的rgba顏色，但更地道的做法，是使用transparent。4個提示框都應該應用該效果，所以這次我們寫回到公共的部分。
[class^=tip-bubble]:before{
/*其它樣式代碼省略*/
color:transparent;
}
運行效果如下圖所示:
這下真的只剩下一個三角形了，另外3個邊框已經不可見。
我們把箭頭移到左側，這時候用絕對定位將會很方便。只要讓left等于偽元素寬度的相反數就可以了。
偽元素的寬度等于左邊框粗細+右邊框粗細，即30像素。
.tip-bubble-left:before{
border-right-color:#202020;
left:-30px;
}
運行效果如下圖所示:
現在我們要讓箭頭垂直居中，但是氣泡的高度會隨著文本高度的變化而改變。所以我們改用百分比看看，居中自然就是50%了。
.tip-bubble-left:before{
/*其它樣式代碼省略*/
top:50%;
}
運行效果如下圖所示:
還是沒有居中啊。對的，因為定位的參考點是左上角，所以現在是三角形的上頂點對齊到氣泡的中心。所以正確的做法是50%-15px(偽元素寬度的一半)。然而CSS3不支持這種寫法，但用javaScript來實現又有點殺雞用牛刀的感覺，所以我們不妨用其它可以控制位置的屬性來處理，比如CSS3的transform，或者早期CSS就支持的margin-top。這里我們使用后者。
.tip-bubble-left:before{
/*其它樣式代碼省略*/
margin-top:-15px;
}
運行效果如下圖所示，這回真的居中對齊了:
其它三個方向的實現思路跟左箭頭一樣，小編就不再重復了，只給出最后的代碼。
.tip-bubble-top:before{
border-bottom-color:#202020;
left:50%;
top:-30px;
margin-left:-15px;
}
.tip-bubble-right:before{
border-left-color:#202020;
right:-30px;
top:50%;
margin-top:-15px;
}
.tip-bubble-bottom:before{
border-top-color:#202020;
bottom:-30px;
left:50%;
margin-left:-15px;
}
現在讓我們一起來來看下最終的成果吧！
氣泡提示框是軟件，網頁等產品使用頻率非常高的元素，高端黑更是目前技術類軟件的主流色調，所以本教程的實用價值相當高。HTML元素非常簡潔，而CSS代碼也完全沒有摻雜任何跟提示框無關的樣式，移植起來非常方便。另一方面，本文對制作過程每一步的講解都相當細致，涉及的知識點也不復雜，因此本教程除了為實戰的朋友帶來便利以外，也非常適合初學者作為實例教程進行學習。
總結
以上是生活随笔為你收集整理的气泡提示效果css.html,用纯CSS3绘制高端简约的气泡提示框的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 谷歌助手将集成 Bard AI 工具
- 下一篇： CSS 基本样式