Html 如何使用线性渐变创建设计背景？

我有下面的设计，我想在单个div标签上使用单个后台css属性来管理它

我添加了以下代码以使背景与图像中的一样，但我无法为页脚管理它。 HTML

---

使用上面的代码，它只显示左蓝色部分和右灰色部分，但我无法获得任何其他选项，我可以在单个分区上创建页脚部分。

您可以通过混合使用

框阴影和
线性渐变来实现这一点。有关更多详细信息，请参阅内联注释


.main容器{
背景：-webkit线性梯度（顶部，#afafaf 89%，#86aec1 89%，#afafaf 91%）/*这会在底部上方产生细线*/
背景：-莫兹线性梯度（顶部，#AFAFAF89%，#86aec1 89%，#AFAFAF91%）；
背景：线性梯度（顶部，#afafaf89%，#86aec1 89%，#afafaf91%）；
/*只是玩弄一下百分比，增加它们，得到一条更粗的线*/
高度：300px；
保证金：0自动；
宽度：73.9%；
长方体阴影：插入25px-25px#86aec1；/*这将生成较厚的左边框和下边框*/
边框：1px纯黑；
}
您可以通过混合使用
框阴影
和
线性渐变
来实现这一点。有关更多详细信息，请参阅内联注释


.main容器{
背景：-webkit线性梯度（顶部，#afafaf 89%，#86aec1 89%，#afafaf 91%）/*这会在底部上方产生细线*/
背景：-莫兹线性梯度（顶部，#AFAFAF89%，#86aec1 89%，#AFAFAF91%）；
背景：线性梯度（顶部，#afafaf89%，#86aec1 89%，#afafaf91%）；
/*只是玩弄一下百分比，增加它们，得到一条更粗的线*/
高度：300px；
保证金：0自动；
宽度：73.9%；
长方体阴影：插入25px-25px#86aec1；/*这将生成较厚的左边框和下边框*/
边框：1px纯黑；
}
您可以使用多个背景。在以下示例中，使用了两个线性渐变和一个纯色背景：


.main容器{
保证金：0自动；
宽度：50%；
高度：300px；
背景：
线性梯度（向右，
rgba（133173192,1）0，rgba（133173192,1）20px，
rgba（133173192,0）20px
),
线性梯度（至顶部，
rgba（133173192,1）0，rgba（133173192,1）20px，
rgba（133173192,0）20px，rgba（133173192,0）25px，
rgba（133173192,1）25px，rgba（133173192,1）30px，
rgba（133173192,0）30px
),
#非洲空军；
}
您可以使用多个背景。在以下示例中，使用了两个线性渐变和一个纯色背景：


.main容器{
保证金：0自动；
宽度：50%；
高度：300px；
背景：
线性梯度（向右，
rgba（133173192,1）0，rgba（133173192,1）20px，
rgba（133173192,0）20px
),
线性梯度（至顶部，
rgba（133173192,1）0，rgba（133173192,1）20px，
rgba（133173192,0）20px，rgba（133173192,0）25px，
rgba（133173192,1）25px，rgba（133173192,1）30px，
rgba（133173192,0）30px
),
#非洲空军；
}
你在找类似的东西吗？不确定，因此没有添加为anwer。是的，你很好，但我尝试了相同的，但我想要完全相同的设计。您可以看到底部蓝色背景之间有灰色空间。那东西很难设计（没错，我们必须使用方框shaow（插图）和线性渐变的组合。那个灰色区域在小提琴中。@Harry:你能帮我写一下css代码吗，就像我昨晚尝试的那样。这对我会有很大帮助。：）你在找类似的东西吗？不确定，因此没有添加为anwer。是的，你很好，但我尝试了相同的，但我想要完全相同的设计。您可以看到底部蓝色背景之间有灰色空间。那东西很难设计（没错，我们必须使用方框shaow（插图）和线性渐变的组合。那个灰色区域在小提琴中。@Harry:你能像我昨晚尝试的那样为我写css代码吗？这对我帮助很大。：）你很棒。谢谢你的回答，你太棒了。谢谢你的回答。
<div class="main-container></div>

.main-container{
 linear-gradient(to right, #86aec1 0%, #86aec1 3.6%, #afafaf 3.6%, #afafaf 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
 height: 100%;
 margin: 0 auto;
 width: 73.9%;
}