这是我最近为一个项目处理此问题的CodePen示例:
http://codepen.io/byronj/pen/waOxqM
我在主要内容部分添加了一个
盒阴影(box-shadow)。然后,在内容底部添加了一个
绝对定位(absolute positioned)的div,其中包含一个
CSS渐变(CSS gradient),其一端是内容背景颜色,另一端是透明背景,如下所示:
.container {
width: 1024px;
margin: 0 auto;
}
.container article {
background-color: #fff;
margin: -6em auto 10em auto;
padding-top: 2em;
width: 100%;
box-shadow: 0px -2px 20px 2px rgba(0, 0, 0, 0.4);
}
.bottom-gradient {
position: absolute;
width: 115%;
height: 60%;
z-index: 1;
bottom: -20px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.59) 10%, white 50%, white 100%);
}
为确保内容不被渐变覆盖,我将“p”元素设置为
position:relative,并将其
z-index 设置为2,如下所示:
p {
padding: 1em 3em;
position: relative;
z-index: 2;
margin: 1em auto;
font-size: 1.3em;
line-height: 1.5em;
}
对于Eric的情况,您需要将渐变放置在包含box-shadow的元素顶部,以逆转此效果。
希望这可以帮助到您。
:before
将其放置在同一平面上,如果需要,则在y
轴上旋转90
度。 - Arpit Srivastavaopacity
或使用shadow
的rgb(color,color,color,opacity)
来实现。 - Arpit Srivastava