纯CSS绘制星星评分特效

只需要用两个图标即可实现：

实现效果如下：

以下为代码：

<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>
<title>星级评分展示CSS样式技巧</title>
<styletype="text/css">
.vote-star{
display:inline-block;/*内联元素转换成块元素，并不换行*/
margin-right:6px;
width:75px;/*5个星星的宽度*/
height:15px;/*1个星星的高度*/
overflow:hidden;
vertical-align:middle;
background:url(../content/images/group/starsblack.png) repeat-x;}
.vote-star i{
display:inline-block;/*内联元素转换成块元素，并不换行*/
height:15px;/*1个星星的高度*/
background:url(../content/images/group/starsyellow.png) repeat-x 00;}
.vote-number{
vertical-align:middle;
font-family:微软雅黑,Verdana,Geneva, sans-serif;
font-size:12px;}
</style>
</head>
<body>
<divclass="star">
<spanclass="vote-star"><istyle="width:97%"></i></span><spanclass="vote-number">9.7分</span>
</div>
</body>
</html>

在项目中，可以将span标签换成div都可以

来自为知笔记(Wiz)

纯CSS绘制星星评分特效

附件列表

推荐阅读