如何在CSS中使用2个渐变创建背景

Question

我有一个div,白色背景在前30%,蓝色在底部70%.

现在我需要的是底部也有渐变.

我在白色/蓝色部分使用以下行:

background: -webkit-linear-gradient(top, white, white 30%, #030A69 30%, #01063e);

我有一个当前效果的Jsfiddle:https://jsfiddle.net/7j06431k/1/

这是期望的效果:

我如何实现这一目标？

Answer 1

使用以下css:

background: linear-gradient(white 30%, #030A69 30%, #01063e);

#mainColumn {
  background: linear-gradient(white 30%, #030A69 30%, #01063e);
  height:500px;
  width:500px;
  border:2px solid magenta;
}

<div id="mainColumn">
  
</div>