CSS3是一種強大的樣式表語言，可以為網頁帶來豐富的效果和交互體驗。在這篇文章中，我們將會介紹如何使用CSS3來制作一個簡單的WiFi圖標。

.wifi {
width: 30px;
height: 30px;
position: relative;
}
.wifi:before,
.wifi:after {
content: "";
display: block;
border-radius: 50%;
position: absolute;
}
.wifi:before {
background-color: #ccc;
top: 0;
left: 0;
width: 20px;
height: 20px;
}
.wifi:after {
background-color: #fff;
top: 5px;
left: 5px;
width: 10px;
height: 10px;
}

首先，我們定義了一個名為“wifi”的class，給該元素設置了一個寬度和高度，并將位置設為相對定位（relative）。接下來，我們使用偽元素:before和:after來繪制圓形圖標。

在:before中，我們設置了一個灰色的背景顏色，并把它的位置設為在“wifi”元素的左上角。然后，我們將它的寬度和高度設為20px，使它比整個圖標要小一些。

接下來，在:after中，我們設置了一個白色的背景顏色，并將它的位置設為在“wifi”元素的中心。然后，我們將它的寬度和高度設為10px，以使其與之前設置的圓形重疊。

最終，我們得到了一個簡單的WiFi圖標，可以在網頁中使用。