通过FontAwesome获得星级评分的CSS
作者：互联网
2026-03-28
HTML教程
我通过不同的方法尝试了一些CSS星级的变化,并尝试通过FontAwesome而不是使用精灵来实现以下内容.我希望能够理想地包括半星,但这是下面的例子失败的地方.这是我到目前为止所尝试的.我不能让半/部分星在这里正常工作.任何指针非常感谢！
.score { display: block; font-size: 16px; position: relative; overflow: hidden;}.score-wrap { display: inline-block; position: relative; overflow: hidden; height: 19px;}.score .stars-active { color: #EEBD01; position: relative; z-index: 10; display: inline-block;}.score .stars-inactive { color: grey; position: absolute; top: 0; left: 0; -webkit-text-stroke: initial; overflow: hidden;} 溢出：隐藏需要在’明星活跃'(大小的元素)而不是’得分包装'(从不溢出.)你可以使用白色空间：nowrap来防止星星包裹到下一行隐藏溢出容器.
.score { display: block; font-size: 16px; position: relative; overflow: hidden;}.score-wrap { display: inline-block; position: relative; height: 19px;}.score .stars-active { color: #EEBD01; position: relative; z-index: 10; display: inline-block; overflow: hidden; white-space: nowrap;}.score .stars-inactive { color: grey; position: absolute; top: 0; left: 0; -webkit-text-stroke: initial; /* overflow: hidden; */} 相关推荐
