CSS绘制星星评分

今天优畅给大家介绍一个纯CSS写的星星评分展示效果。主要是

border

的一个非常巧妙的实际运用，非常不错，很值得学习。先看下演示效果吧。

HTML结构代码

<div class="rating rating-1">
  <i class="star-1">★</i>
  <i class="star-2">★</i>
  <i class="star-3">★</i>
  <i class="star-4">★</i>
  <i class="star-5">★</i>
</div>
<div class="rating rating-1-half">
  <i class="star-1">★</i>
  <i class="star-2">★</i>
  <i class="star-3">★</i>
  <i class="star-4">★</i>
  <i class="star-5">★</i>
</div>
<div class="rating rating-2">
  <i class="star-1">★</i>
  <i class="star-2">★</i>
  <i class="star-3">★</i>
  <i class="star-4">★</i>
  <i class="star-5">★</i>
</div>
<div class="rating rating-2-half">
  <i class="star-1">★</i>
  <i class="star-2">★</i>
  <i class="star-3">★</i>
  <i class="star-4">★</i>
  <i class="star-5">★</i>
</div>
<div class="rating rating-3">
  <i class="star-1">★</i>
  <i class="star-2">★</i>
  <i class="star-3">★</i>
  <i class="star-4">★</i>
  <i class="star-5">★</i>
</div>
<div class="rating rating-3-half">
  <i class="star-1">★</i>
  <i class="star-2">★</i>
  <i class="star-3">★</i>
  <i class="star-4">★</i>
  <i class="star-5">★</i>
</div>
<div class="rating rating-4">
  <i class="star-1">★</i>
  <i class="star-2">★</i>
  <i class="star-3">★</i>
  <i class="star-4">★</i>
  <i class="star-5">★</i>
</div>
<div class="rating rating-4-half">
  <i class="star-1">★</i>
  <i class="star-2">★</i>
  <i class="star-3">★</i>
  <i class="star-4">★</i>
  <i class="star-5">★</i>
</div>
<div class="rating rating-5">
  <i class="star-1">★</i>
  <i class="star-2">★</i>
  <i class="star-3">★</i>
  <i class="star-4">★</i>
  <i class="star-5">★</i>
</div>

CSS样式代码

.rating {
  margin: 10px 0;
}

.rating i {
  display: inline-block;
  width: 0;
  height: 1.5em;
  border-width: 0 0.75em;
  border-style: solid;
  border-color: #eee;
  border-radius: .22em;
  color: white;
  background: #eee;
  font-style: normal;
  line-height: 1.6em;
  text-indent: -0.5em;
  text-shadow: 1px 0 1px #b3b3b3;
}

/** Colors */
.rating-1 .star-1,
.rating-1-half .star-1 {
  border-color: #cc8b1f;
  background: #cc8b1f;
}

.rating-1-half .star-2 {
  border-left-color: #cc8b1f;
}

.rating-2 .star-1,
.rating-2-half .star-1 {
  border-color: #dcb228;
  background: #dcb228;
}

.rating-2 .star-2,
.rating-2-half .star-2 {
  border-color: #dcb228;
  background: #dcb228;
}

.rating-2-half .star-3 {
  border-left-color: #dcb228;
}

.rating-3 .star-1,
.rating-3-half .star-1 {
  border-color: #f0991e;
  background: #f0991e;
}

.rating-3 .star-2,
.rating-3-half .star-2 {
  border-color: #f0991e;
  background: #f0991e;
}

.rating-3 .star-3,
.rating-3-half .star-3 {
  border-color: #f0991e;
  background: #f0991e;
}

.rating-3-half .star-4 {
  border-left-color: #f0991e;
}

.rating-4 .star-1,
.rating-4-half .star-1 {
  border-color: #f26a2c;
  background: #f26a2c;
}

.rating-4 .star-2,
.rating-4-half .star-2 {
  border-color: #f26a2c;
  background: #f26a2c;
}

.rating-4 .star-3,
.rating-4-half .star-3 {
  border-color: #f26a2c;
  background: #f26a2c;
}

.rating-4 .star-4,
.rating-4-half .star-4 {
  border-color: #f26a2c;
  background: #f26a2c;
}

.rating-4-half .star-5 {
  border-left-color: #f26a2c;
}

.rating-5 .star-1,
.rating-5-half .star-1 {
  border-color: #dd050b;
  background: #dd050b;
}

.rating-5 .star-2,
.rating-5-half .star-2 {
  border-color: #dd050b;
  background: #dd050b;
}

.rating-5 .star-3,
.rating-5-half .star-3 {
  border-color: #dd050b;
  background: #dd050b;
}

.rating-5 .star-4,
.rating-5-half .star-4 {
  border-color: #dd050b;
  background: #dd050b;
}

.rating-5 .star-5,
.rating-5-half .star-5 {
  border-color: #dd050b;
  background: #dd050b;
}

.rating-5-half .star-6 {
  border-left-color: #dd050b;
}

通过上面的实现方式，相信大家都可以学到一些东西。最后在感谢大家多多关注优畅主题，谢谢！

如果本文对你有帮助，你可以扫描右边的二维码打赏，谢谢支持

联系优畅：uctheme#qq.com (#改为@)
微信订阅号：优畅主题（uctheme）
官网淘宝店：http://uctheme.taobao.com
版权声明：版权归 优畅主题 所有，转载请注明出处！
转载请保留链接： https://www.uctheme.com/front/877.html

1. 

   沙发！

   chonghua 2014-09-08 下午 8:30 [回复]

   博主有没有成品可供使用呢
   • 

     优畅主题 2014-09-08 下午 8:32

     @chonghua 这个按部就班做就行，呵呵