CSS:由多个类定义的渐变？

Question

是否可以定义多个类，每个类都有一个背景色。那么当一个元素有多个这样的类时，背景会像渐变一样淡化吗？并在纯 css 中执行此操作(因为我已经有执行此操作的代码，但我想知道是否有更好的方法)？

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.wantedResult{
  background-image: linear-gradient(to right, red, green);
}

<div class="red">Red</div>
<div class="green">Green</div>
<div class="red green">Both</div>
<div class="wantedResult">WantedResult</div>

如您所见，“两者”元素仅显示其中一个背景。但它应该将两者都显示为渐变。

有什么办法吗？

注意:当然这是一个非常简单的例子，只有两种颜色，定义“wantedResult”类也没什么大不了的。但是，如果有十种使用过的颜色，它很快就会变得难以管理。

Answer 1

显然没有 CSS 方法可以直接实现这一点，因为浏览器无法知道当有 2 种或 3 种颜色时应该如何定义渐变。有很多可能性。

一种方法是考虑 CSS 变量以简化思考。这个想法是用一些默认颜色定义渐变，您可以通过更改变量来更改这些颜色。同样，这不会产生您想要的效果，但至少可以避免定义大量渐变。

.red_1 {
  --color1: red;
}
.red_2 {
  --color2: red;
}

.green_1 {
  --color1: green;
}
.green_2 {
  --color2: green;
}

.coloration{
  background: linear-gradient(var(--color1,pink),var(--color2,pink));
}

div {
 height:50px;
 margin:5px;
}

<div class="coloration">default</div>

<div class="coloration green_1 green_2">green</div>

<div class="coloration red_1 green_2">green red</div>

<div class="coloration red_2 green_1">green red</div>

<div class="coloration red_2 red_1">red</div>