html - css 半星颜色

Question

我有一个关于评级显示的星号的问题。我有代码

<style>
    .goldstardiv { color: gold; }
    .goldgraystardiv { color: khaki; }
    .graystardiv { color: gray; }
</style>
<div class="goldstardiv">&#x2605;</div>
<div class="goldgraystardiv">&#x2605;</div>
<div class="graystardiv">&#x2605;</div>

如何用 css 显示一个左边灰色、右边黄色的星星？

谢谢

Answer 1

将带有半灰色星形(宽度 50% 溢出隐藏)的 div 放在彩色星形上。

HTML:

<div class="goldstardiv">
    &#x2605;
    <div class="halfstar">&#x2605;</div>
</div>

CSS:

.goldstardiv { color: gold; position: relative; }
.halfstar {
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;    
    color: #666;
    overflow: hidden;
}

半星以像素为单位，但如果需要，可以随意调整以百分比形式获得。

例子: http://jsfiddle.net/LV7SS/2/