通过HTML设置渐变百分比值

Question

我想创建一个具有线性渐变背景的div容器。它们的百分比颜色值不同。

我有一个可行的解决方案，可以在循环中创建这些div容器

.box {
  width: 500px;
  height: 200px;
}

<!-- The percentage values are just variables! -->
<div style="background-image: linear-gradient(blue 0%, red 20%)" class="box">
</div>

是否可以为渐变创建CSS类，并仅通过HTML代码设置百分比值？

伪代码

.box {
  width: 500px;
  height: 200px;
}

.gradient{
  /* no colors provided! */
  background-image: linear-gradient(blue, red) 
}

<!-- The percentage values are just variables! -->
<div style="gradientValues: [0%, 20%]" class="box gradient">
</div>

我只需要更改渐变的值，颜色是固定的。但是我不想用JavaScript来做，因为我是根据ColdFusion代码创建这些div的。我不想在不需要时执行JavaScript代码。我可以重构渐变颜色并将其放在CSS类中，而不用编写

style="background-image: linear-gradient(blue VAL1, red VAL2)"

在我的HTML中。

Answer 1

是

通过使用CSS Custom Properties（又称CSS变量）

:root {
  --var1: 0;
  --var2: 50%;
}

div {
  height: 100px;
  margin-bottom: 1em;
  background-image: linear-gradient(to right, blue var(--var1), red var(--var2));
}

<div></div>

<div style="--var1:50%; --var2:50%;"></div>