CSS实现星级部分填充：解决半星不显示与星体着色问题

核心问题分析 #

你当前的CSS存在三个关键错误：

1. CSS变量定义错误：--half-star-percentage直接引用JS变量percentageFilled，CSS无法识别JS变量，必须通过JS动态注入到元素上。
2. clip-path语法错误：同时使用path和polygon两种语法，浏览器无法解析。
3. 适配错误：Font Awesome星星是字体图标，直接修改width或背景无法改变图标自身的颜色显示。

修正后的完整代码 #

HTML（确保已引入Font Awesome）

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<div class="stars-landing" id="stars-box">
  <i class="fa-solid fa-star" data-star></i>
  <i class="fa-solid fa-star" data-star></i>
  <i class="fa-solid fa-star" data-star></i>
  <i class="fa-solid fa-star" data-star></i>
  <i class="fa-solid fa-star" data-star></i>
</div>

JS（动态设置星星类和填充百分比变量）

const ratingValue = 4.27;
const fullStarCount = Math.floor(ratingValue);
const filledPercentage = (ratingValue - fullStarCount) * 100;

const stars = document.querySelectorAll(".stars-landing i[data-star]");
stars.forEach((star, index) => {
  star.classList.remove("full-star", "half-star"); // 重置类
  if (index < fullStarCount) {
    star.classList.add("full-star");
  } else if (index === fullStarCount) {
    star.classList.add("half-star");
    // 将填充百分比注入为当前星星的CSS变量
    star.style.setProperty("--filled-percent", `${filledPercentage}%`);
  }
});

CSS（实现星星自身的部分着色）

/* 基础星星样式：默认灰色未填充 */
.stars-landing i[data-star] {
  color: #e0e0e0;
  position: relative;
  font-size: 24px; /* 可根据需求调整大小 */
}

/* 全填充星星：直接设置填充颜色 */
.stars-landing i.full-star {
  color: #ffc107;
}

/* 半填充星星：通过伪元素叠加实现部分着色 */
.stars-landing i.half-star {
  /* 保留默认未填充颜色作为底色 */
  color: #e0e0e0;
}

.stars-landing i.half-star::before {
  content: "\f005"; /* Font Awesome实心星星的Unicode编码 */
  position: absolute;
  left: 0;
  color: #ffc107;
  /* 用clip-path裁剪出需要显示的填充部分 */
  clip-path: polygon(0 0, var(--filled-percent) 0, var(--filled-percent) 100%, 0 100%);
}

关键原理说明 #

1. 动态CSS变量：通过JS的style.setProperty将填充百分比注入到目标星星的CSS变量中，解决CSS无法直接读取JS变量的问题。
2. 伪元素叠加：利用Font Awesome星星基于::before渲染的特性，叠加一个相同的星星伪元素，通过clip-path裁剪出对应百分比的显示区域，实现部分着色效果。
3. 颜色层级：底色用未填充的灰色，叠加层用填充色，通过裁剪只显示叠加层的部分区域，最终呈现出部分填充的视觉效果。

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