CSS是網頁設計中最重要的一部分之一。其強大的功能使得設計師們能夠輕松地創建出各種炫酷的效果。在這篇文章中，我們將學習如何使用CSS繪制一個空五角星輪廓。

.star {
position: relative;
display: inline-block;
width: 18px;
height: 18px;
border-radius: 9px;
border-width: 2px;
border-style: solid;
border-color: #FFD700 #FFD700 transparent transparent;
transform: rotate(-45deg) scale(.8);
}
.star:before {
content: "";
position: absolute;
top: -6px;
left: -18px;
width: 30px;
height: 30px;
border-radius: 50%;
border-width: 2px;
border-style: solid;
border-color: transparent transparent #FFD700 #FFD700;
}

以上代碼中的偽元素:before用于繪制五角星的五個頂點。可以看到，我們使用了border樣式創建出該元素的邊框，通過控制border的顏色和寬度，以及偽元素的位置和大小等參數，我們成功繪制了一個具有五個凸角的五角星輪廓。

在實際應用中，我們可以通過在不同大小的容器中加入這個CSS類，快速地創建出一個好看的空五角星。