[英]CSS3 linear gradient for top and bottom of element
我正在尝试为元素的顶部和底部获得线性渐变。 谷歌上的教程到处都是,所以我希望这里有人可以提供帮助。
这是 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,没有图片。)
我认为这对你有帮助
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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.