CSS 排行榜效果是一種非常流行的網頁設計模式，它可以讓網站的內容更加生動和富有活力。下面是一些實現排行榜效果的 CSS 代碼，供大家參考。

/* 給排行榜容器設定寬度 */
.ranking {
width: 300px;
}
/* 給排行榜標題設定樣式 */
.ranking h2 {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
/* 給每個排名設定樣式 */
.ranking li {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #ddd;
padding: 10px;
}
/* 給每個排名的名次設定樣式 */
.ranking li .ranking-number {
font-size: 20px;
font-weight: bold;
}
/* 給每個排名的內容設定樣式 */
.ranking li .ranking-content {
font-size: 16px;
}
/* 給排行榜前三個名次特別設定樣式 */
.ranking li:nth-child(1) .ranking-number,
.ranking li:nth-child(2) .ranking-number,
.ranking li:nth-child(3) .ranking-number {
color: gold;
}

以上代碼就可以實現一個基本的排行榜效果，排名前三個名次會顯示為金色。