Question

我希望阴影在这个部分后面。我已经尝试了所有的方法，但仍然无法找到解决方法。

HTML

<section id="features" class="shadow">
    <div class="container">Content</div>
</section>

CSS

section {
    text-align:center;
    position:relative;
    z-index:20
}

#features {
    padding:4rem 0;
    background:#018CB8
}

.container {
    color:#FFF;
    margin:0 auto;
    max-width:55rem;
    width:90%
}

.shadow:after {
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 40px rgba(0,0,0,0.8);
    box-shadow:0 0 40px rgba(0,0,0,0.8);
    bottom:0;
    left:10%;
    right:10%;
    width:80%;
    height:50%;
    -moz-border-radius:100%;
    border-radius:100%
}

Answer 1

我简化了你的例子：

目前只有z-index: -1有效，让我感到困惑。

Have a fiddle!

HTML

<div class="shadow">Content</div>

CSS

.shadow {
    padding: 4rem 0;
    background: #018CB8;
    color:#FFF;
    margin: 0 auto;
    max-width: 55rem;
    width: 90%;
    position: relative;
    text-align: center;
}
.shadow:after {
    content:"";
    position:absolute;
    box-shadow:0 0 40px rgba(0, 0, 0, 0.8);
    bottom:0px;
    left:10%;
    right:10%;
    width:80%;
    height:50%;
    border-radius:100%;
    z-index: -1;
}

Answer 2

你在这里：jsfiddle。

我添加了一个margin-bottom: 40px来居中阴影。这是你在找什么？

CSS阴影覆盖div /内容

2 个答案: