如何讓星級評價效果以百分比呈現﹍CSS 技巧詳解

最近接到需求要在網頁呈現「五顆星評等」的效果，就像搜尋結果常會看到的星級評等：



或 Google 商家的評分星等：



從上面的示意圖可發現，以 5 分為滿分的情況下，4.5 分(也就是 90%)所呈現的星等並非 4 星(無條件捨去法)，也不是 5 星(四捨五入法)，而是忠實地呈現 4.5 星。

這要如何做到呢，是否除了一顆星以外，還要額外準備半顆星的圖案呢？經研究的結果，只要使用簡單的 CSS 就能達成，而且任何小數點、百分比，都能依照比例呈現。

(圖片出處: pixabay.com)

一、CSS 製作原理

在網路上找了幾個範例效果作為參考：

1. 使用偽類

• https://jsfiddle.net/4qqspqxh/

這個範例算是最簡潔的一個，只是利用偽類會導致在修改字元時，比較不方便一些。比較過其他版本後，發現可以用這組程式改成擴充性比較佳的最終版本。


2. 使用 display:flex

• https://codepen.io/anon/pen/dQPmOw

這組程式碼的版面對齊效果很好，研究了 CSS 發現原來是使用了 display: flex 的方式。

但因為是比較新的 CSS 語法，導致會有跨瀏覽器(及版本)的問題，同時在不同行動裝置的呈現效果也不容易預期，因此最終還是捨棄了這個方案。


3. 使用背景圖

• https://codepen.io/Bluetidepro/pen/GkpEa

這組程式碼有兩個效果，一個使用透明背景圖(包含前景、背景兩顆星的圖案)，導致擴充性比較差，因為想套用、又想變換圖案的話，自己也得製作類似的圖。

另一個使用 UNICODE 字元，修改比較方便。不過這兩個效果的缺點都一樣，為每個星星圖案設定了固定寬度，將來要變更圖案大小的話，設定上會比較麻煩。


4. 製作原理

從以上範例可歸納出，製作星級評價效果的原理為：

• 分別產生前景、背景兩組不同顏色的 5 顆星
• 這兩組圖案位置必須互相重疊，前景會蓋過背景
• 為前景的 5 顆星設定評比的寬度百分比，例如 80%，那麼前景就只會顯示 4 顆星
• 超出前景寬度的部分設定隱藏，那麼超出的部分就只會顯示背景的圖案

以下依據此原理，製作出簡單又方便任意調整星星大小的範例程式碼。

二、範例程式碼

★★★★★

★★★★★

以上範例效果的 HTML / CSS 請見以下程式碼：

<style>
.ratings {
position: relative;
vertical-align: middle;
display: inline-block;
color: #ddd; /*背景星星顏色*/
overflow: hidden;
font-size: 20px; /*調整字體大小可放大縮小星星*/
text-shadow: 0px 1px 0 #999;
}
.full_star {
width: 90%; /*調整寬度可變更星等*/
position: absolute;
left: 0;
top: 0;
white-space: nowrap;
overflow: hidden;
color: #D56A16; /*前景星星顏色*/
}
</style>
<div class="ratings">
<div class="empty_star">★★★★★</div>
<div class="full_star">★★★★★</div>
</div>

• 最重要的是修改 width 百分比，這會改變顯示的星等，例如 80% 會顯示 4 顆星
• 星星圖案使用了 Unicode 圖案 "★"，可置換為其他字元，也可使用 img 圖案
• CSS 修改請見註解文字說明
• 可分別修改星星大小、顏色

三、範例效果

以下提供各種修改的效果：

1. 放大縮小 5 顆星

★★★★★

★★★★★

★★★★★

★★★★★

★★★★★

★★★★★

以上為修改 font-size 數值的各種效果


2. 改用 10 顆星也行

★★★★★★★★★★

★★★★★★★★★★

以上為調整 HTML 顯示字元數量的效果，寬度設定為 75%，所以顯示 7.5 顆星


3. 也可用別的 Unicode 圖案、Font Awesome 圖示

❤❤❤❤❤

❤❤❤❤❤

可參考「Unicode 表情圖案(emoji ) + 特殊符號字元一覽表」，挑選想要置換星星圖案的字元。

可參考「Font Awesome 圖示速查表」，挑選想要置換星星圖案的字元。但記得要先引用 Font Awesome 外連。

更多 CSS 相關技巧：