html - 我们如何使用线性渐变创 build 计背景？

我有以下设计，我想使用单个div标签上的单个背景css属性进行管理。



我添加了以下代码以使其在图像中成为背景，但无法为页脚进行管理。
的HTML

<div class="main-container></div>

的CSS

.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%;
}

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

最佳答案

您可以使用box-shadow和linear-gradient的组合来实现。请参阅内联注释以获取更多详细信息。

.main-container {
  background: -webkit-linear-gradient(top, #afafaf 89%, #86aec1 89%, #afafaf 91%); /* this produces the thin line above the bottom */
  background: -moz-linear-gradient(top, #afafaf 89%, #86aec1 89%, #afafaf 91%);
  background: linear-gradient(top, #afafaf 89%, #86aec1 89%, #afafaf 91%);
  /* Just play around with the percentages and increase them to get a thicker line */
  height: 300px;
  margin: 0 auto;
  width: 73.9%;
  box-shadow: inset 25px -25px #86aec1; /* this produces the thick left and bottom border */
  border: 1px solid black;
}

<div class="main-container">&nbsp;</div>