css - 如何使梯度流向多个方向？

我想通过使用渐变来创建一个不规则的效果。
在css3中，可以让渐变从top to bottom，bottom to top，left to right或right to left移开，并且可以使用多种颜色。但仅适用于一个方向。
我想通过计算每个区域的平均颜色或主导颜色来组合图像的4个区域，然后使用渐变为图像创建背景。

我考虑过使用多重渐变，但是当您创建渐变 ac 和另一个 bd 并将它们都放在图片后面时，效果会不太理想。 (我标记了关键区域。)。
您有什么想法可以做到吗？
编辑:我不想像在图片中那样在渐变之间混合颜色。我对所有颜色之间的平滑 float 感到满意。
编辑2:我在这里上传了关于我的问题的演示:http://jsfiddle.net/HJtnG/
Edit3:我们已经了解到CSS3不能实现，但是SVG可以实现。经过一番搜索之后，我找到了这张照片:

因此，我将使用如图所示的彩色圆圈。

最佳答案

在2020年，考虑到新的渐变和蒙版，您将有更多的可能性来实现所需的目标。

使用conic-gradient()

html {
  min-height:100%;
  background:conic-gradient(from 45deg,red,blue,green,yellow,red);
}

使用linear-gradient和mask:

html {
  min-height:100%;
  background:linear-gradient(to right,red,blue);
}
html::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(to right,green,gold);
  -webkit-mask:linear-gradient(#fff,transparent);
          mask:linear-gradient(#fff,transparent);
}

结合使用radial-gradient和mask

html {
  background:radial-gradient(120% 120%,red 30%,#000);
}
html:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:radial-gradient(120% 120%,blue 30%,#000);
  -webkit-mask:linear-gradient(transparent,#fff);
          mask:linear-gradient(transparent,#fff);
}
.full {
  height:100vh;
  position:relative;
  background:radial-gradient(120% 120%,green 30%,#000);
  -webkit-mask:linear-gradient(to right, transparent,#fff);
          mask:linear-gradient(to right, transparent,#fff);
}
.full:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:radial-gradient(120% 120%,gold 30%,#000);
  -webkit-mask:linear-gradient(transparent,#fff);
          mask:linear-gradient(transparent,#fff);
}
body {
  margin:0;
}

<div class="full"></div>

关于css - 如何使梯度流向多个方向？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17505110/