很多网站目前都有评分功能，当然随之而来的是如何更加简单方便的显示出星星亮的个数。
很多网站展示的时候是一颗整亮星+半颗亮星，比如5分就显示2个半，5.3分还是显示2个半，4.9分则显示2个亮星，四舍五入了。
这样当然不是最优的显示方式，最优的方式肯定是多少分就显示多少比例的星星，换一种思维就是通过百分比来显示，这样的好处就是只要设计一个亮星和一个暗星就行了，其余的通通交给比例来实现，这样的方式更加精准，同时避免了程序对分数进行哪些不必要的四舍五入判断。
当然，实现这个效果是异常简单的，简单说来就是先放一个背景，然后在背景上面放一个图片，然后显示图片能看到的比例就行。
下面具体看代码：
htmlhttp://www.w3.org/1999/xhtml head metaContent-Typetext/html;utf-8 / title 星级评分展示CSS样式技巧 - 威言威语weisay.com /title styletext/css .vote-star{ display:inline-block;/*内联元素转换成块元素，并不换行 weisay.com*/ margin-right:6px; width:85px;/*5个星星的宽度 weisay.com*/ height:17px;/*1个星星的高度 weisay.com*/ overflow:hidden; vertical-align:middle; background:url(https://img.weisay.com/weiimg/article/495_1.gif) repeat-x 0 -17px;}.vote-star i{ display:inline-block;/*内联元素转换成块元素，并不换行 weisay.com*/ height:17px;/*1个星星的高度 weisay.com*/ background:url(https://img.weisay.com/weiimg/article/495_1.gif) repeat-x 0 0;}.vote-number{ vertical-align:middle; font-family:微软雅黑, Verdana, Geneva, sans-serif; font-size:12px;} /style /head body div >程序只要做一件简单的事情，就是控制代码里面的 width:97% ，宽度的比例就行，这样就能实现精准的星级评分展示效果了。