CSS基礎教程——純CSS開發的氣泡式提示框

本文爲 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強化教程