非常漂亮的css星效果總結第1/2頁_經驗交流

用純css打造星級評分效果正在被越來越多地應用在網絡RIA中，結合ajax等技術，可以渲染出很出色的視覺效果和很棒的用戶體驗，在這篇文章開始之前，大家可以先去cssheaven感受。

最近由於專案需要，我在網路上找了很多css星級評分的例子和說明，但是發現大多數都是翻譯國外的文章，而且解釋得併不是非常清楚，所以我決定自己來做一個總結，也希望能夠給大家一些幫助。

先用中文寫出這個效果的演算法：
1. 使用背景圖片的位置切換來獲得星級效果；


2. 整個效果最關鍵的地方就是“三層理論”，整個效果分為三層——空分層、分數層和打分層，三層的佈局均為absolute，以避免ul本身自帶的相對佈局（當然用p也可以獲得相同效果）；
3. 空分層就是使用背景圖片中的「空星」作為背景，並橫向平鋪；
4. 分數層的寬度等於（分數*圖片寬度）得到的數值，並且使用背景圖片中的“分數星（例子中為黃色）”作為背景橫向平鋪；
5. 打分層就是將5個空鏈接置於5個星星的位置上（寬度要和背景圖片吻合），並將5個a：hover的背景設為“打分星（這裡為綠色）”，寬度設為星數*圖片寬度，left為0 (靠左，這樣結合a：hover不同的寬度就可以出現打分效果)，垂直座標小於a的垂直座標（以確保當前a：hover不會遮擋住其他連結）；