渐变中的 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

渐变内部的渐变是不可能的。

话虽如此，请看一下。由于渐变是分层的，因此您必须为您的颜色设置一些透明度，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 );
}

Answer 2

不，那不可能。

渐变的语法是：

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> ]?

线性渐变不会创建颜色，它会创建图像。