CSS排行榜圖標(biāo)是Web設(shè)計中常用的一種元素，它可以通過簡單的CSS代碼實現(xiàn)各種不同形狀的排行榜圖標(biāo)。下面我們來看一些常見的CSS排行榜圖標(biāo)樣式。

.rank-icon {
display: inline-block;
width: 30px;
height: 30px;
background-color: #F7D1E1;
border-radius: 50%;
font-size: 20px;
text-align: center;
line-height: 30px;
color: #333;
font-weight: bold;
}
.rank-icon.rank-1 {
background-color: #FFE04D;
color: #FFF;
}
.rank-icon.rank-2 {
background-color: #AED6F1;
}
.rank-icon.rank-3 {
background-color: #E5E7E9;
color: #333;
font-weight: normal;
}
.rank-icon.star {
background-color: transparent;
width: 20px;
height: 20px;
border: 2px solid #F1C40F;
border-radius: 50%;
box-sizing: border-box;
}
.rank-icon.star:before {
content: "\2605";
font-size: 18px;
display: block;
position: relative;
top: -2px;
color: #F1C40F;
}

以上代碼實現(xiàn)四種不同的CSS排行榜圖標(biāo)樣式。其中，第一種是基本型，使用圓形背景和居中的數(shù)字，第二種是第一名的特殊樣式，使用黃色背景和白色字體，第三種是第三名的特殊樣式，使用灰色背景和普通粗體字體。第四種是一種類似于收藏之類的特殊圖標(biāo)，使用透明背景和黃色邊框，同時通過:before偽元素實現(xiàn)五角星的效果。

總之，CSS排行榜圖標(biāo)是很常見的Web設(shè)計元素，通過簡單的CSS樣式就可以實現(xiàn)各種不同的形狀和風(fēng)格，可以讓你的網(wǎng)頁更加生動有趣。