限制元素上径向渐变的大小

Question

我有一个部分占用 100% 宽度和 100% 高度。我需要一个100％宽度和100px高度的径向渐变（中心#5E88B2和#06305A外部）。因此，顶部 100px 上应该有径向渐变，并且在默认颜色（白色）之后应该继续。 我知道如何使用线性渐变来实现它。但是，径向渐变怎么做呢？

.Content {
  border-top: 10px solid #666666;
  background-size: 100%;
  background: #5E88B2;
  background: -moz-radial-gradient(center, ellipse cover, #5E88B2 0%, #06305a 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #5E88B2));
  background: -webkit-radial-gradient(center, ellipse cover, #5E88B2 0%, #06305a 100%);
  background: -o-radial-gradient(center, ellipse cover, #5E88B2 0%, #06305a 100%);
  background: -ms-radial-gradient(center, ellipse cover, #5E88B2 0%, #06305a 100%);
  background: radial-gradient(ellipse at center, #5E88B2 0%, #06305a 100%);
}
.MainContent{ background-color: #ffffff; border-radius: 5px; margin-top: 3%;margin-left: auto;
margin-right: auto; padding-left: 15px; padding-right: 15px;clear: both;display: table; width:300px;}

<section style="background-color:#fff;">This is header</section>
<section id="OuterSection" class="container-fluid Content">
  <section class="container MainContent">
    <!-- Main Markup -->
    Content<br>Content<br>Content<br>Content<br>Content<br> Content<br>Content<br>
    Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>
  </section>
</section>
<section style="background-color:#eee;">This is footer</section>

目前它正在全高度。但是，我需要从“OuterSection”顶部开始 100px 高度的径向渐变

Answer 1

您可以使用background-size 和background-repeat 属性来限制背景图片的大小。

.Content {
  border-top: 10px solid #666666;
  background: #5E88B2;
  background: -moz-radial-gradient(center, ellipse cover, #5E88B2 0%, #06305a 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #5E88B2));
  background: -webkit-radial-gradient(center, ellipse cover, #5E88B2 0%, #06305a 100%);
  background: -o-radial-gradient(center, ellipse cover, #5E88B2 0%, #06305a 100%);
  background: -ms-radial-gradient(center, ellipse cover, #5E88B2 0%, #06305a 100%);
  background: radial-gradient(ellipse at center, #5E88B2 0%, #06305a 100%);
  background-size: 100% 100px;
  background-repeat: no-repeat;
}
.MainContent {
  background-color: #ffffff;
  border-radius: 5px;
  margin-top: 3%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  clear: both;
  display: table;
  width: 300px;
}

<section style="background-color: #ffffff;">This is header</section>
<section id="OuterSection" class="container-fluid Content">
  <section class="container MainContent">
    <!-- Main Markup -->
    Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>
    Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>
  </section>
</section>
<section style="background-color: #eeeeee;">This is footer</section>