在許多網(wǎng)站上我們都經(jīng)常看到小電話圖標，一般出現(xiàn)在網(wǎng)站頁面的底部。這些小電話圖標通常都是用CSS實現(xiàn)的。下面將為大家介紹一下如何用CSS制作一個小電話圖標。

.phone {
width: 16px;
height: 16px;
background-color: #fff;
border-radius: 50%;
box-shadow: 0 0 0 1px #ccc;
position: absolute;
bottom: 20px;
right: 20px;
cursor: pointer;
}
.phone:before {
content: "";
display: block;
width: 6px;
height: 6px;
border: 2px solid #ccc;
border-right-width: 0;
border-top-width: 0;
position: absolute;
top: 5px;
left: 5px;
transform: translate(50%, -50%) rotate(45deg);
}

首先，我們創(chuàng)建一個class為"phone"的div標簽，設(shè)置它的寬高為16px，并園角化，加入一個陰影效果。設(shè)置bottom和right屬性為20px，使它在頁面的底部右下角。同時，我們還將光標設(shè)置為指針，使得當鼠標覆蓋到電話圖標上時，鼠標會變成小手。

其次，我們?yōu)樵揹iv標簽中添加一個偽元素:before，用于表示小電話圖標的話筒部分。我們設(shè)置它的寬高為6px，并將它的右邊框和頂邊框的寬度為0。用transform屬性來控制它的位置，使其位于div標簽中間位置，同時旋轉(zhuǎn)45度，使其成為一個話筒的樣子。

這樣我們就成功的實現(xiàn)了一個小電話圖標。當我們將這段代碼添加到一個網(wǎng)頁中時，用戶就可以點擊這個小電話圖標，與網(wǎng)站管理員進行電話聯(lián)系，提高了網(wǎng)站用戶之間的溝通效率。