怎样利用CSS变量实现动态的星星评分展示_通过百分比变量控制填充-css教程-PHP中文网

可用--rating变量控制星星填充比例，通过background-clip: text+渐变或clip-path: inset()实现，取值0–100，需设默认值、防nan并注意浏览器兼容性。

怎样利用css变量实现动态的星星评分展示_通过百分比变量控制填充

用 `--rating` 变量控制星星填充比例

CSS 变量本身不能直接驱动渐变填充，但可以和 clip-path 或 background-clip 配合实现“按百分比截断”的视觉效果。关键在于把星星拆成两层：底层灰色星形（全显），上层黄色星形（被裁剪）。裁剪比例由 --rating 决定，取值范围建议设为 0 到 100（对应 0%–100%）。

实操时推荐用 linear-gradient + background-clip: text 方案更稳定，尤其兼容现代浏览器；若需支持旧版 Safari，则改用 clip-path: inset() 裁剪容器。

--rating 必须是数字（不带单位），否则 calc() 计算会失败
避免用 em 或 rem 单位定义该变量，纯数值最安全
设置默认值：--rating: 0，防止未初始化时样式崩溃

用 `background-clip: text` 实现平滑填充

这个方案依赖文字内容（如 ★）作为遮罩，上层渐变色透过文字显示，底层用同色文字做“底片”。它天然支持小数百分比（比如 62.3%），过渡细腻，且无需额外 DOM 元素。

注意：必须加 -webkit-text-fill-color: transparent 才能让文字透出背景色；background-image 的渐变方向要水平（to right），宽度按 --rating 动态计算。

star {
  --rating: 75;
  background: linear-gradient(90deg,
    #ffc107 0%, #ffc107 calc(var(--rating) * 1%), 
    #e0e0e0 calc(var(--rating) * 1%), #e0e0e0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

渐变中两个颜色分界点都用 calc(var(--rating) * 1%)，确保无缝衔接
若星星是伪元素（::before），需确保其 content 是 ★ 且字体支持该符号
Firefox 对 background-clip: text 支持较晚（v119+），生产环境需降级 fallback

用 `clip-path: inset()` 做兼容性兜底

当需要支持 Safari 15.4 以下或 Firefox 旧版本时，用容器包裹两层星星，靠 clip-path 裁剪上层黄色星。裁剪高度固定，只动左右偏移量，用 calc(100% - (var(--rating) * 1%)) 控制露出宽度。

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

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

下载

这种方式不依赖文本渲染，DOM 结构稍重，但兼容性极好（IE 不行，其余主流浏览器均 OK）。

.star-container {
  position: relative;
  width: 20px; height: 20px;
}
.star-container::before {
  content: "★";
  position: absolute;
  color: #e0e0e0;
}
.star-container::after {
  content: "★";
  position: absolute;
  color: #ffc107;
  clip-path: inset(0 calc(100% - calc(var(--rating) * 1%)) 0 0);
}