当我尝试时style=width:60% to .rating类，金色应该只填充 3 颗星，其余的星应该是空白的，但它不起作用。请帮助我我的错误是什么？
我的html代码：
<div class="star">
<div class="rating" style="width:60%">
<span>☆</span>
<span>☆</span>
<span>☆</span>
<span>☆</span>
<span>☆</span>
</div>
</div>
我的CSS代码：
.star{ width:200px; position: relative;color: #bdbdbd;}
.rating span
{
font-size:30px;
margin-left:-4px;
white-space: nowrap;
overflow: hidden;
}
.rating span:before {
content:"\2605";
position: absolute;
color:gold;
}
CHECK 小提琴链接
这是我以前用过的。这效果非常好 - 你甚至可以填写星星的一小部分......
https://jsfiddle.net/4qqspqxh/
.ratings {
position: relative;
vertical-align: middle;
display: inline-block;
color: #b1b1b1;
overflow: hidden;
}
.full-stars{
position: absolute;
left: 0;
top: 0;
white-space: nowrap;
overflow: hidden;
color: #fde16d;
}
.empty-stars:before,
.full-stars:before {
content: "\2605\2605\2605\2605\2605";
font-size: 14pt;
}
.empty-stars:before {
-webkit-text-stroke: 1px #848484;
}
.full-stars:before {
-webkit-text-stroke: 1px orange;
}
/* Webkit-text-stroke is not supported on firefox or IE */
/* Firefox */
@-moz-document url-prefix() {
.full-stars{
color: #ECBE24;
}
}
/* IE */
<!--[if IE]>
.full-stars{
color: #ECBE24;
}
<![endif]-->
<div class="ratings">
<div class="empty-stars"></div>
<div class="full-stars" style="width:70%"></div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
