如何使用 CSS 实现星标（★）的渐进式部分填充效果？-html教程-PHP中文网

本文介绍一种基于 CSS linear-gradient 与 background-clip: text 的纯 CSS 星标动态填充方案，支持任意小数评分（如 4.27），无需修改 HTML 结构或依赖 SVG，兼容现代浏览器且性能优异。

本文介绍一种基于 css `linear-gradient` 与 `background-clip: text` 的纯 css 星标动态填充方案，支持任意小数评分（如 4.27），无需修改 html 结构或依赖 svg，兼容现代浏览器且性能优异。

实现星标的部分填充（如显示 4.27 颗星）的核心难点在于：不能简单用 width 裁剪图标元素（因字体图标不可缩放裁剪），也不能用 clip-path 硬编码星形路径（维护成本高、响应性差）。更优解是利用文本渲染能力 + 渐变遮罩，将五星字符（★★★★★）视为“文字”，通过背景渐变控制可见区域。

以下为完整、可直接运行的解决方案：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

✅ 推荐实现：CSS 变量驱动的文本渐变填充

<div class="stars-landing" id="stars-box" style="--rating: 4.27;" aria-label="Rating: 4.27 out of 5">
  ★★★★★
</div>

:root {
  --star-size: 24px;         /* 星标尺寸 */
  --star-color: #e0e0e0;     /* 未填充星标颜色（底色）*/
  --star-fill: #ffc107;      /* 已填充星标颜色（主色）*/
}

.stars-landing {
  --percent: calc(var(--rating) / 5 * 100%);
  display: inline-block;
  font-size: var(--star-size);
  font-family: "Segoe UI", "Times New Roman", serif; /* 使用衬线字体确保 ★ 渲染一致 */
  line-height: 1;
  color: var(--star-color);  /* 默认显示为空心星（灰阶）*/
  letter-spacing: -2px;       /* 紧凑排布，避免星间空隙 */
  position: relative;
}

/* 利用 ::before 叠加渐变填充层，覆盖原文字 */
.stars-landing::before {
  content: attr(aria-label); /* 或直接写 '★★★★★'，但需确保与 DOM 文本一致 */
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  color: transparent;
  background: linear-gradient(90deg,
    var(--star-fill) 0%,
    var(--star-fill) var(--percent),
    var(--star-color) var(--percent),
    var(--star-color) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

? 关键原理说明：

::before 伪元素复刻五星文本（视觉上与原内容重叠），但将其文字颜色设为 transparent；

用 linear-gradient(90deg, ...) 水平渐变：前 --percent 区域显示 --star-fill（金色），之后区域显示 --star-color（灰色）；

background-clip: text 将该渐变「裁剪」到文字轮廓内，实现精准填色；

--rating 由 JS 动态注入（如 element.style.setProperty('--rating', ratingValue)），无需操作 DOM 类名或样式属性。

✅ JavaScript 动态更新示例（简洁可靠）

const starsBox = document.getElementById('stars-box');
const ratingValue = 4.27;

// 直接更新 CSS 自定义变量
starsBox.style.setProperty('--rating', ratingValue.toFixed(2));
// 可选：同步更新 aria-label 提升可访问性
starsBox.setAttribute('aria-label', `Rating: ${ratingValue} out of 5`);