CSS中，五星圖標是常見的評分方式之一，在網站、應用等領域被廣泛使用。在本篇文章中，我們將介紹如何用CSS制作五星圖標。
// HTML結構<div class="star"> <span class="star-item"></span> <span class="star-item"></span> <span class="star-item"></span> <span class="star-item"></span> <span class="star-item"></span> </div>// CSS樣式.star { display: inline-block; font-size: 0; } .star-item { display: inline-block; width: 20px; height: 20px; background: url(star.png) no-repeat; background-size: 100% 100%; margin-right: 5px; } .star-item:hover, .star-item.active { background-position: 0 -20px; }
以上是制作五星圖標的基本代碼。我們在HTML中新增了一個
元素，類名為“star”，它包含了五個子元素，類名為“star-item”。
在CSS中，我們將“.star”元素設置為內聯塊級元素，并設置font-size為0。前者是為了讓五個星星在一行顯示，后者是為了避免四舍五入帶來的像素偏移。
接下來，我們將“.star-item”元素設置為內聯塊級元素，同時設置寬度和高度為20px，并且將背景圖像設置為star.png。同時，我們設置了margin-right為5px，用于在五個星星之間添加間距，達到較好的視覺效果。
最后，我們使用:hover偽類和.active類選擇器，將.hover和.active狀態下的樣式分別做出了不同的樣式效果。其中，.hover樣式指當鼠標懸停在星星上時，星星會變亮。.active樣式指選中的星星，在點擊后亮起。
這就是制作五星圖標的基本方法。通過不斷的學習和實踐，我們可以制作出更加復雜而精美的五星評分組件。