一些 ⭐️⭐️⭐️⭐️⭐️ 星级评分系统并不总是完全平均的星星。 假设您想支持对某事进行 2.25 星的评分。 为此，您可以部分“填充”星星的形状。 我喜欢 这个想法，由 Samuel Kraft 提出。 棘手的部分是
最后一步是使覆盖层 div 仅影响下面的星星 SVG，而不是背景。 我们可以使用 CSS
mix-blend-mode属性和color值来实现这一点。
查看 Samuel 的文章以获取交互式演示和更深入的信息，但我认为我会亲自尝试一下，以了解这个想法。
这个想法是，这是一个覆盖在星星之上的覆盖层。 您看不到它，它也不会影响星星，因为它要么是 black 要么是 white，并且 mix-blend-mode: color; 意味着该覆盖层只会影响具有颜色的元素。
如记录的那样，有很多方法可以进行评分星级。 我们之前介绍了五种方法。 其中一种相当巧妙的方法是使用 Unicode 星星（例如，作为文本），然后使用 -webkit-background-clip: text; 填充其背景，这意味着您可以部分填充它们（例如，使用 硬停止 linear-gradient()）。 很棒的技巧。
我喜欢您对评分星级的做法。
我只需要进行一项调整：如果您需要单击星星（cursor: pointer），因为覆盖层在它之上，覆盖的部分不可单击。
要解决此问题，只需在覆盖层上放置一个 z-index: -1，并将 mix-blend-mode 从覆盖层移动到 svg，其值为“luminosity”。 结果相同，但现在所有星星都有正确的游标。