溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文為 H5EDU 機構官方 HTML5培訓 教程，主要介紹：CSS基礎教程 —— 純CSS開發的氣泡式提示框
作為前端開發人員，我們都熟悉使用CSS來生成頁面上豐富的樣式，對于邊框border屬性來說，也是我們最熟悉不過的CSS屬性，今天我們這里將介紹如何使用純CSS來生成一個氣泡式樣的提示框，希望大家喜歡！
在這篇文章中我們將使用:after偽標簽來生成提示框的指示箭頭。
首先我們定義提示框相關屬性，我們添加了box陰影和文字陰影效果，這樣讓提示框更加漂亮：
/* bubble */
.tip-bubble {
position: relative;
background-color: #202020;
width: 100px;
padding: 20px;
color: #CCC;
text-align: center;
border-radius: 10px;
margin: 50px;
border: 1px solid #111;
box-shadow: 1px 1px 2px #202020;
-moz-box-shadow: 1px 1px 2px #202020;
-webkit-border-shadow: 1px 1px 2px #202020;
text-shadow: 0px 0px 15px #fff;
}復制代碼
接下來我們處理:after偽標簽：
.tip-bubble:after {
content: '';
position: absolute;
width: 0;
height: 0;
border: 15px solid;
}復制代碼
最后我們定義提示框的箭頭方向：
.tip-bubble-top:after {
border-bottom-color: #202020;
left: 50%;
bottom: 100%;
margin-left: -15px;
}
點擊進入CSS強化教程
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
