CSS 星级评分（支持小数评分）

CSS 星级评分（支持小数评分）: 用途

只有全满或全空的星星无法体现 4.1 和 4.9 的差别。这个生成器用纯 CSS 制作能精确填充评分比例的星星，借助裁剪到文字上的渐变，评分保存在一个 CSS 变量中。

可调整星星数量、大小、颜色、旁边的数字和评价总数。还有可点击版本，使用隐藏的单选按钮，可用鼠标、触摸和键盘操作，并在表单中提交评分，无需 JavaScript。两个版本都带有供读屏软件使用的文本。

使用方法

1. 输入评分和星星数量。
2. 调整大小和颜色。
3. 复制代码。

使用场景

• 商品的平均评分。
• 评价表单。
• 落地页上的评价汇总。

常见问题

星星是如何显示小数的？

星星是文本 (★)，用带有硬停止点的渐变上色：到评分百分比为止是实心色，之后是空心色。评分 4.3（满分 5）时，渐变会涂满 86% 的宽度，第五颗星只有一部分有颜色。

无障碍友好吗？

是的。元素带有 role=img 和类似“评分 4.3 / 5”的 aria-label，读屏软件会朗读它来代替符号。

可点击版本是如何工作的？

它使用隐藏的单选按钮 (radio)，每颗星一个，因此可用鼠标、触摸和键盘（方向键）操作，并随表单一起提交评分，无需 JavaScript。

真的免费吗？

是的，100%免费。无需注册，无需订阅，不限使用次数。所有工具：Tools123是免费的。

相似工具