基于FontAwesome实现CSS星级评分：半星效果实现求助

嘿，我之前也踩过FontAwesome做星级评分的坑，尤其是半星效果这块，你的代码没写完没关系，给你一套完整的纯CSS实现方案，能完美支持任意分数的半星显示，亲测好用！

核心思路 #

用双层重叠的星星实现：底层是灰色的未选中星星，上层是黄色的选中星星，通过控制上层星星容器的宽度，结合overflow:hidden来截断星星，从而实现半星、任意小数评分的效果，不用单独用半星图标，灵活性拉满。

完整代码实现 #

HTML结构

<!-- 单个评分组件，通过--score变量设置评分，比如3.5分 -->
<div class="score" style="--score:3.5">
  <div class="score-empty">
    <i class="fa-solid fa-star"></i>
    <i class="fa-solid fa-star"></i>
    <i class="fa-solid fa-star"></i>
    <i class="fa-solid fa-star"></i>
    <i class="fa-solid fa-star"></i>
  </div>
  <div class="score-filled">
    <i class="fa-solid fa-star"></i>
    <i class="fa-solid fa-star"></i>
    <i class="fa-solid fa-star"></i>
    <i class="fa-solid fa-star"></i>
    <i class="fa-solid fa-star"></i>
  </div>
</div>

CSS样式

/* 评分容器，控制整体大小和定位 */
.score {
  display: inline-block;
  position: relative;
  font-size: 24px; /* 可以根据需求调整星星大小 */
  line-height: 1; /* 避免行高影响对齐 */
}

/* 两层星星容器都绝对定位，重叠在一起 */
.score-empty, .score-filled {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

/* 未选中的灰色星星 */
.score-empty {
  color: #e0e0e0;
}

/* 选中的黄色星星，通过CSS变量计算显示宽度 */
.score-filled {
  color: #ffc107;
  width: calc(var(--score) / 5 * 100%);
}

关键细节说明 #

1. 动态调整分数：只需要修改.score元素的--score变量值即可，比如设置--score:2.7就能显示2个半多一点的星星，完全支持小数评分。
2. 样式自定义：可以随意修改星星的颜色、大小，比如把黄色改成橙色，或者把星星换成其他FontAwesome图标（比如心形）。
3. 兼容性：这个方案用的都是基础CSS属性，几乎兼容所有现代浏览器，不用担心兼容性问题。

注意事项 #

确保你已经在页面中引入了FontAwesome的CSS文件，这样fa-solid fa-star图标才能正常显示。

内容的提问来源于stack exchange，提问作者tomphilps