轻松实现星级评分组件

实现星级评分的五种方式：

1.使用图片2.使用背景图片3.使用 SVG 绘制形状4.使用 CSS 绘制形状5.使用 Unicode 符号

先介绍一下 CSS 介绍如何实现一个五角星，我们可以给一个 div 元素先设置 100 宽高，然后通过 clip-path 把元素裁剪出五角星的形状。

<div class="clip-star"></div>


.clip-star {
  background: gold;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  display: inline-block;
  height: 100px;
  width: 100px;
}

前几种方式都比较常见，今天主要介绍如何通过特殊符号实现评分组件。

Unicode 字符可以直接把 ★★★★★ 复制并粘贴到 HTML 中，我们可以使用字体、颜色、宽度、高度和其他属性来调整大小和样式。

<div class="Stars" style="--rating: 2.3;" aria-label="Rating of this product is 2.3 out of 5.">


:root {
    --star-size: 60px;
    --star-color: #fff;
    --star-background: #fc0;
}


.Stars {
    --percent: calc(var(--rating) / 5 * 100%);
    display: inline-block;
    font-size: var(--star-size);
    font-family: Times; 
    line-height: 1;
}
.Stars::before {
    content: '★★★★★';
    letter-spacing: 3px;
    background: linear-gradient(90deg, var(--star-background) var(--percent), var(--star-color) var(--percent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

评级值作为内联自定义 CSS 属性变量 --rating，它实际上是使用 calc() 函数在 CSS 处理从数值到百分比的转换：

--percent: calc(var(--rating) / 5 * 100%);

评级值是一个浮点数，它是一种 number 类型。使用此转换有助于确保我们可以通过多种方式设置这些值。

填充星星可能听起来很困难，但事实证明非常简单。我们需要一个linear-gradient背景来在金色填充结束的地方创建颜色停止点：

background: linear-gradient(90deg,
  var(--star-background) var(--percent), 
  var(--star-color) var(--percent)
);

请注意，我使用自定义颜色变量，因为我希望样式可以轻松调整。由于自定义属性是从父元素样式继承的，因此您可以在 :root 元素上定义，然后在元素中使用。

:root {
  --star-size: 60px;
  --star-color: #fff;
  --star-background: #fc0;
}

最后就是将背景剪裁为文本的形状，以便背景渐变呈现星星的形状。将 Unicode 星星视为我们用来从背景颜色中剪出星星形状的模板。

-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

这样就可以轻松的定义评分组件了，并且评分的值支持小数也支持整数，可以很方便的设置半颗星。