这篇文章主要介绍了使用CSS绘制星级评分效果的方法,当然要动态地使用鼠标点击打分还需要使用JavaScript脚本,本文只讲述绘制部分,需要的朋友可以参考下

先来看一下CSS绘制五角星的基本方法：

1.     #star-five {   
2.    margin: 50px 0;   
3.    position: relative;   
4.    display: block;   
5.    color: red;   
6.    width: 0px;   
7.    height: 0px;   
8.    border-right:  100px solid transparent;   
9.    border-bottom: 70px  solid red;   
10.    border-left:   100px solid transparent;   
11.    -moz-transform:    rotate(35deg);   
12.    -webkit-transform: rotate(35deg);   
13.    -ms-transform:     rotate(35deg);   
14.    -o-transform:      rotate(35deg);   
15. }   
16. #star-five:before {   
17.    border-bottom: 80px solid red;   
18.    border-left: 30px solid transparent;