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

Question

我有以下设计，我想在单个 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 上创建页 footer 分。

Answer 1

您可以混合使用 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>