CSS绘制星星评分

33339

Javin 发布于 2014-02-14 22 条评论

今天是个特殊的日子，祝大家双节快乐，心想事成！^_^
接下来给大家介绍一个纯CSS写的星星评分展示效果。主要是border的一个非常巧妙的实际运用，非常不错，很值得学习。先看下演示效果吧。

CSS绘制星星评分

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;
}

通过上面的实现方式，相信大家都可以学到一些东西。最后在此祝福大家新年新气象，马上有…(你懂的)！

取消回复

登录之后才能评论，请点击登录。

全部评论 / 22

我也总结了几个常见的css案例，写在了博客中，还望指正，

http://www.haorooms.com/post/css_common

Aaron 2014-02-14 登录以回复

20
干活好东西保存

网赚大学wzdaxue 2014-02-14 登录以回复

19
真心不错！

真心 2014-02-14 登录以回复

18
学习了！！！！

longhoo 2014-02-14 登录以回复

17
学习了

dj007 2014-02-14 登录以回复

16
效果还不错。

wmtimes 2014-02-14 登录以回复

15
效果挺不错的，以后做这个东西就不用做图片了。哈哈

撒旦法 2014-02-14 登录以回复

14
膜拜大婶

千里草 2014-02-14 登录以回复

13
纯代码实现的啊厉害

电脑爱好者 2014-02-14 登录以回复

12
感谢分享，这个好啊！

生活有意思 2014-02-14 登录以回复

11
这个效果确实挺不错的~

记忆碎片 2014-02-14 登录以回复

10
这个用途太广泛了，效果图看起也很不错，感谢博主的分享，希望以后还有更多好的东西呈现，加油~

恒创科技 2014-02-14 登录以回复

9
星星的款式不错，漂亮。

六间房 2014-02-14 登录以回复

8
这个好赞

热血洒红尘 2014-02-14 登录以回复

7
谁发个链接让我参考参考？

分享好东西 2014-02-14 登录以回复

6
非常同意这个观念！

孤狼网站访客QQ统计 2014-02-14 登录以回复

5
css也行？欢迎回访

heyuan 2014-02-14 登录以回复

4
感觉像图片效果好

木纹砖 2014-02-14 登录以回复

3
学习了

Techlly 2014-02-14 登录以回复

2
效果挺不错的，以后做这个东西就不用做图片了。哈哈

小小米 2014-02-14 登录以回复

1
1. 不错
  
  封面.Cover 2014-02-14 登录以回复