CSS3线性渐变用于元素的顶部和底部

Question

我正在尝试为元素的顶部和底部获得线性渐变。谷歌上发现的教程到处都是，所以我希望有人可以提供帮助。

这是HTML和CSS代码：

CSS：

.content {background: -webkit-gradient(linear, center bottom, center top, from(#f5f5f5), to(#fff));  }
.separator {
    height:1px;
    border-bottom:1px solid #ebebeb;
    }

HTML：

<div class="content">

</div>

<div class="separator"></div>

<div class="content">

</div>

<div class="separator"></div>

<!-- etc... ->

我希望它能产生这个：

当然，我使用的CSS和HTML在内容的底部显示渐变。如何使用最小的HTML使用顶部和底部显示它？

我将在.content内有内容，所以我希望渐变成为背景图像。我可以为.separator添加渐变，但渐变不会出现在下一个元素后面。

我知道我可以使用背景图片，但我想避开这条路线，因为我有一个响应式设计。 （是的，我知道我可以使用响应式背景图像，但我想只使用CSS，没有图像。）

Answer 1

我认为这对你有帮助

HTML

<div class="contentTop">

</div>

<div class="separator"></div>

<div class="contentBottom">

</div>

CSS

.contentTop{
    height:100px;
    background:#ffffff;
    /* For WebKit (Safari, Google Chrome etc) */
    background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#f1f1f1));
    /* For Mozilla/Gecko (Firefox etc) */
    background:-moz-linear-gradient(top, #fff, #f1f1f1);
    /* For Internet Explorer 5.5 - 7 */
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#fff, endColorstr=#f1f1f1);
    /* For Internet Explorer 8 */
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#fff, endColorstr=#f1f1f1)";   
}
.contentBottom{
    height:100px;
    background:#f5f5f5;
    /* For WebKit (Safari, Google Chrome etc) */
    background:-webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#fff));
    /* For Mozilla/Gecko (Firefox etc) */
    background:-moz-linear-gradient(top, #f5f5f5, #fff);
    /* For Internet Explorer 5.5 - 7 */
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#f5f5f5, endColorstr=#fff);
    /* For Internet Explorer 8 */
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#f5f5f5, endColorstr=#fff)";   
}
.separator{
    border-top:solid 1px #eaeaea;
    height:1px;
    font-size:0;
    line-height:0;
}

这是jsFiddle File

Answer 2

您可以使用此链接： http://www.colorzilla.com/gradient-editor/

它是一个css渐变生成器。