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

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上创建页脚部分。

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>

Answer 2

您可以使用多个背景。在以下示例中，使用了两个线性渐变和一个纯色背景：

.main-container {
  margin: 0 auto;
  width: 50%;
  height: 300px;
  background:
    linear-gradient(to right,
      rgba(133, 173, 192, 1)    0, rgba(133, 173, 192, 1) 20px,
      rgba(133, 173, 192, 0) 20px
    ),
    linear-gradient(to top,
      rgba(133, 173, 192, 1)    0, rgba(133, 173, 192, 1) 20px,
      rgba(133, 173, 192, 0) 20px, rgba(133, 173, 192, 0) 25px,
      rgba(133, 173, 192, 1) 25px, rgba(133, 173, 192, 1) 30px,
      rgba(133, 173, 192, 0) 30px
    ),
    #AFAFAF;
}

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