css 手写评分星星

主要利用border这个属性来做的这件事情，根据不同的评分给border-left-width添加颜色即可以达到想要的效果

效果图如下：

html 部分

<div class="main">
<i class="star0">★</i>
    <i class="star1">★</i>
    <i class="star2">★</i>
    <i class="star3">★</i>
    <i class="star4">★</i>
    <i class="star5">★</i>
    <i class="star6">★</i>
    <i class="star7">★</i>
    <i class="star8">★</i>
    <i class="star9">★</i>
    <i class="star10">★</i>
</div>

css 

<style>
.main i{ display:inline-block; background:#e6e6e6; border-radius:0.22em;line-height:1.4em;  text-shadow: 1px 0 1px #b3b3b3; font-style:normal;/*去除斜体*/}
.main .star0{ 
width:1.4em; 
color:#fff; 
text-indent:0.18em;
line-height:1.4em;
 }
 .main .star1{ 
width:1.2em; 
color:#fff; 
border-color: #e6e6e6;
text-indent:0.12em;
border-width:0em 0.1em;
border-left-color:#529325;
border-style: solid;
 }
 .main .star2{ 
width:1.0em; 
color:#fff;
border-color: #e6e6e6; 
text-indent:0.10em;
border-width:0em 0.2em;
border-left-color:#529325;
border-style: solid;
 }
 .main .star3{ 
width:0.8em; 
color:#fff; 
border-color: #e6e6e6;
text-indent:-0.1em;
border-width:0em 0.3em;
border-left-color:#529325;
border-style: solid;


 }
 .main .star4{ 
width:0.6em; 
color:#fff; 
border-color: #e6e6e6;
text-indent:-0.2em;
border-width:0em 0.4em;
border-left-color:#529325;
border-style: solid;
 
 }
 .main .star5{ 
width:0.4em; 
color:#fff; 
border-color: #e6e6e6;
text-indent:-0.3em;
border-width:0em 0.5em;
border-left-color:#529325;
border-style: solid;
 }
 .main .star6{ 
width:0.2em; 
color:#fff; 
border-color: #e6e6e6;
text-indent:-0.4em;
border-width:0em 0.6em;
border-left-color:#529325;
border-style: solid;
 }
 .main .star7{ 
width:0em; 
color:#fff; 
border-color: #e6e6e6;
text-indent:-0.5em;
border-width:0em 0.7em;
border-left-color:#529325;
border-style: solid;
 }
 .main .star8{ 
width:0em; 
color:#fff; 
border-color: #e6e6e6;
text-indent:-0.6em;
border-left-color:#529325;
border-style: solid;
border-top-width:0em;
border-bottom-width:0em;
border-left-width:0.9em;
border-right-width:0.5em;
 }
 .main .star9{ 
width:0em; 
color:#fff; 
border-color: #e6e6e6;
text-indent:-0.9em;
border-top-width:0em;
border-bottom-width:0em;
border-left-width:1.2em;
border-right-width:0.2em;
border-left-color:#529325;
border-style: solid;
 }
 .main .star10{ 
width:1.4em; 
color:#fff; 
text-indent:0.2em;
background:#529325;
 }
 
</style>