当我尝试 style=width:60%
到 .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;
}
检查 fiddle link
最佳答案
这是我以前用过的。这非常有效 - 你甚至可以填充一小部分星星......
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>
关于html - 使用 css 宽度仅填充 60% 的星号,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33858426/