梯度内的CSS梯度

Question

是否可以使用渐变作为渐变内的颜色之一？

为了我的特定目的，我有一个从左到右的初始梯度：

linear-gradient(to right, red, darkgray);

但我希望灰色部分实际上是一个从上到下的渐变：

linear-gradient(to bottom, darkgray, white);

我尝试了我想要工作的代码：

linear-gradient(to right, red, linear-gradient(to bottom, darkgray, white));

但这似乎行不通，我也没见过有人写关于渐变中渐变的可能性的文章。

编辑:不可能CSS梯度是图像，不能用作其他渐变中的颜色，但是@hungerstar在下面有一个很好的解决方法:在另一个梯度上设置透明的渐变层。

Answer 1

不那是不可能的。

渐变的语法是

linear-gradient( 
  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
  \---------------------------------/ \----------------------------/
    Definition of the gradient line        List of color stops  

where <side-or-corner> = [left | right] || [top | bottom]
  and <color-stop>     = <color> [ <percentage> | <length> ]?

线性梯度不是创造颜色，而是创造图像。

Answer 2

梯度内的渐变是不可能的。

这么说了，看看这个。由于渐变是分层的，所以您必须用rgba()设置颜色的透明度，以允许后面的渐变通过上面的渐变来显示。

也许是这样的？

​

body {
  margin: 0;
  height: 100vh;
  background:
    linear-gradient( to right, rgba(255, 0, 0, 0.5), rgba( 169, 169, 169, 0.5 ) ),
    linear-gradient( to bottom, darkgray, white );
}

​