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

【问题标题】：How we can create a design background using the linear-gradient?我们如何使用线性渐变创建设计背景？
【发布时间】：2014-07-26 06:35:45
【问题描述】：

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

【问题讨论】：

您在寻找类似this 的东西吗？不确定，因此不作为答案添加。
是的，你很棒，但我试过了，但我想要完全相同的设计。您可以在底部看到蓝色背景之间有灰色空间。那东西很难设计。 :(
没错，我们必须使用 box-shaow（插图）和线性渐变的组合。而那个灰色区域就在那里。
@Harry：你能帮我写一下我昨晚试过的css代码吗？这对我有很大帮助。:)

标签： html css background linear-gradients

【解决方案1】：

您可以使用box-shadow 和linear-gradient 的组合来实现此目的。有关详细信息，请参阅内联 cmets。

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

&lt;div class="main-container"&gt;&amp;nbsp;&lt;/div&gt;

【讨论】：

你很棒。感谢您的精彩回答。

【解决方案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;
}

&lt;div class="main-container"&gt;&lt;/div&gt;

【讨论】：