一步一步教你做提示框--傻瓜也能學會

效果圖：

爲了便於區別，我們將那個三角形繪製成了紅色，顯示框繪製成了橙黃色。

首先介紹提示框的大致製作方法：

1. 做出上面三個元素：問號及其圓圈、三角形和長方形提示框
2. 設置三角形及長方形提示框不可見
3. 設置鼠標經過問號時顯示提示框

下面我主要使用<p>選擇器來作爲元素容器

-------------------------------------------------三個僞類用法--------------------------------------------------

這裏要用到兩個CSS僞類：hover，before(或after)

• hover

hover相信大家都已經很清楚，就是鼠標懸停時產生的動作，較常見到的地方就是鼠標移過一個按鈕時，按鈕變了樣。如下所示：

鼠標經過後變成

• before

before是在某元素前面添加，其中比較重要的屬性就是content，表示將要添加的內容。如：

p:before{
    content:'添加的內容'
}

注：同樣的，after表示在元素後面添加內容

---------------------------------------------問號及其圓圈繪製-----------------------------------------------

圓圈主要用到CSS3的一個屬性：border-radius。本來一個元素（塊狀元素）是四邊形的，但是把它的border-radius設置成它長（或寬，這裏主要是指正方形）的一半，它就看起來像是一個圓了（IE8及以下無效）。

比如以下一個CSS樣式：

p{width:20px;    height:20px;   background-color:green;}

它顯示出來的是一個邊長爲20px的正方形

如果給它加上 border-radius:50%;它就變成半徑爲10px的圓了。

最後，帶問號的圓的CSS：

p{width:20px;    height:20px;   background-color:green;    border-radius:50%;    text-align:center;    }
p:before{content:'?';    color:orange;    font-weight: bold;}

效果

-------------------------------------------------三角形繪製--------------------------------------------------

三角形繪製只要三個語句就可以：

p:before{
    content:'';
    border: 10px solid transparent;
    border-bottom-color:#F3252D;
}

這三個屬性是繪製三角形的最簡語句，缺一不可。

效果：

最後那個橙黃色的框框就不寫了，相信大家都會。

TIPS: 如何設置陰影：

 box-shadow:10px 20px 15px rgba(4,235,4,0.2);    

  

 前面兩個參數分別代表陰影在右邊，下邊（負數的話就是左邊，上邊），第三個參數表示羽化半徑(使它看起來是模糊的），rgba中的四個參數分別表示    red、green、blue、alhpa，即紅、綠、藍以及透明度，透明度範圍在0~1之間。如下：

-------------------------------------------------最終代碼--------------------------------------------------

HTML:

<div class="tips">
    <p>提示信息的內容</p>
</div>

CSS:

.tips{
    width:20px;
    height:20px;
    border-radius:50%;
    background-color:green;
    text-align:center;
}
.tips:before{
    content:'?';
    font-weight:bold;
    color:red;
}
/*注：以上就是剛剛說的那個圓及它中間的問號*/

/*注：下面繪製長方形內容顯示框，並使它不顯示*/
.tips p{
    display : none;            /*剛開始時隱藏*/
    width : 300px;
    padding : 20px;            /*此處使用padding而不用height，想想有何區別*/
    border-radius : 5px;            /*圓角*/
    background-color : #fbcc7d;            /*背景色*/
    color : #000;            /*文字顏色*/
    box-shadow : 1px 1px 1px rgba(0,0,0,0.2);        /*陰影*/ 
    position : absolute;            /*固定位置，不然會撐開頁面*/
    left : auto;        /*邊框起始位置*/
    margin-top : 8px;            /*邊框距離頂部8px，這是因爲要在它上面加上一個三角形，8px是那個三角形的邊長*/
    text-align : left;            /*文字居左*/
}
/*注：下面給內容框添加一個三角形*/
.tips p:before{
    content : '';
    border : 8px solid transparent;
    border-bottom-color : #F3252D;
    position : absolute;        /*位置固定*/
    left : 5px;                /*三角形與內容框的相對位置*/
    top : -16px;            /*使它在P元素的上面16px處（這16px就是三角形的邊長的兩倍）*/
}

/*給問號添加hover屬性*/
.tips:hover p{
    display : block;
}

顯示效果：

至此，提示框就完成了。