如何在CSS/HTML中为Unicode星号(★)实现半填充着色？

嘿，我来分享几个纯CSS实现Unicode星号（★）半填充效果的靠谱方案，不用额外图片或者JS，直接基于你现有的代码改造就行：

这个方法利用背景渐变填充文字，只显示一半的颜色，是最推荐的方案，兼容性也不错（现代浏览器都支持）。

核心思路是：给元素设置线性渐变背景，让左半部分是橙色，右半部分是你想要的未填充颜色（比如浅灰），然后把文字设置为透明，再用background-clip: text让渐变只显示在文字区域内。

代码示例：

<div class="starHalfFill">★</div>

.starHalfFill {
  /* 设置星号大小，按需调整 */
  font-size: 24px;
  /* 线性渐变：左半橙，右半浅灰 */
  background: linear-gradient(90deg, orange 50%, #ccc 50%);
  /* 让渐变只作用于文字 */
  -webkit-background-clip: text;
  background-clip: text;
  /* 文字设为透明，显示渐变背景 */
  color: transparent;
}

如果想要填充右半部分，只需要把渐变的百分比顺序反过来：linear-gradient(90deg, #ccc 50%, orange 50%)就行。

如果需要兼容更老的浏览器，或者想更精准控制填充区域，可以用两个星号叠加，通过裁剪其中一个来实现半填充效果。

代码示例：

<div class="starHalfFill">
  <span class="filled">★</span>
  <span class="unfilled">★</span>
</div>

.starHalfFill {
  position: relative;
  font-size: 24px;
}
.starHalfFill span {
  position: absolute;
  top: 0;
  left: 0;
}
/* 填充的橙色星号，只显示左半部分 */
.filled {
  color: orange;
  overflow: hidden;
  width: 50%;
}
/* 未填充的灰色星号，显示完整 */
.unfilled {
  color: #ccc;
}

这个方法的好处是对旧浏览器支持更好，而且可以通过调整width的值来控制填充的比例（比如30%就是三分满）。

• 星号的字体可能会影响显示效果，建议用系统默认的无衬线字体，或者指定一个清晰的字体（比如font-family: Arial, sans-serif;），避免星号形状模糊。
• 如果需要圆形的半填充星号，可能需要调整渐变的角度或者用径向渐变，但Unicode的★本身是五角星，线性渐变就足够实现半填充效果啦。

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