Question

好的，我不知道这是否可能，我的代码有问题......

那么，我尝试在渐变中制作线性渐变？

background: -webkit-linear-gradient(top, #9DB2F0 0%, #9DB2F0 40%, -webkit-linear-gradient(left, red 0%, yellow 100%) 40%)

如果可能的话，请告诉我，如果我做错了什么，或者可以使用哪种浏览器。

Answer 1

渐变为image values，而不是color values。由于CSS3中的渐变仅使用色块，因此不能像那样嵌套它们。

您需要找到一个渐变或图像编辑器，它可以帮助您直观显示最终渐变的样子（因为我不知道您希望它看起来像什么），并且可能会生成相应的单个你的线性渐变。

从我看来，它看起来像一个多向渐变。在这种情况下，您要么使用layered backgrounds（每层有一个渐变），要么使用实际图像。

Answer 2

只需添加@BoltClock即可回答一些技巧：

分层背景正如他在答案中所述。它完成了多个背景“图像”（渐变）。每个人都可以通过以下方式进行控制：
```
background-position: left center, right top;
background-repeat: repeat, no-repeat;
```
如果您想要设置2个图像/渐变色。
渐变添加到:before和:after伪。您可以根据需要调整和定位这些伪（您必须：绝对定位，在主背景和实际内容之间将它们分层z-index等）。例如，请参阅我的前一个答案和小提琴：Showing two different gradients as a background using CSS?

似乎你不能通过content: url() url()添加渐变，只能添加图像（url（）的任何有效值）。通过content添加的内容无法作为真实背景（重复，位置）进行控制，因此即使有效，它也不会是最通用的方法。