CSS3是一種新型的樣式語言，它為Web設(shè)計(jì)師提供了更多的功能和靈活性，包括制作話筒圖標(biāo)。 在這篇文章中，我們將討論如何使用CSS3來制作一個漂亮的話筒圖標(biāo)。

.microphone{
width: 50px;
height: 100px;
position: relative;
background-color: white;
border: 2px solid black;
border-radius: 25px 25px 0px 0px;
margin: 10px;
overflow: hidden;
}
.microphone:before{
content: "";
background-color: black;
width: 100%;
height: 8px;
display: block;
position: absolute;
bottom: 0;
left: 0;
border-radius: 0px 0px 5px 5px;
}
.microphone:after{
content: "";
background-color: black;
width: 20px;
height: 20px;
display: block;
position: absolute;
bottom: -9px;
left: 50%;
margin-left: -10px;
border-radius: 50%;
box-shadow: 0px 0px 5px black;
}

HTML 結(jié)構(gòu)應(yīng)該如下：

<div class="microphone">
</div>

上述代碼中，我們創(chuàng)建了一個類名為“microphone”的 div 元素。使用相對定位(position: relative)，將 div 元素包含在其中并設(shè)置寬高，然后設(shè)置邊框顏色，它的形狀是一個圓形話筒（border-radius: 25px 25px 0px 0px）。

接著，制作話筒底部的黑色條紋，使用: before 偽元素創(chuàng)建黑色矩形。要想底部變得更加圓潤，我們默認(rèn)讓下邊框半徑為5像素實(shí)現(xiàn)這個效果(border-radius: 0px 0px 5px 5px)。

最后，用 :after 偽元素在話筒底部創(chuàng)建一個小圓球，顯示麥克風(fēng)的位置。

現(xiàn)在您可以在任何需要的地方使用這個CSS3實(shí)現(xiàn)的話筒圖標(biāo)，它看起來非常好，效果十分逼真。