Box Shadow 在现场工作一次，但不再工作

Question

这是我正在使用的 CSS。

.hentry {
    padding: 40px 0;
    max-width: 840px;
    margin: 0 auto;
    background-color: #fff;
}
.hentry:before {
    box-shadow: -15px 0 15px -15px inset;
    content: " ";
    height: 100%;
    left: -15px;
    position: absolute;
    top: 0;
    width: 15px;
}
.hentry:after {
    box-shadow: 15px 0 15px -15px inset;
    content: " ";
    height: 100%;
    position: absolute;
    right: -15px;
    width: 15px;
}


.widget-area {
    margin: 0 auto;
    max-width: 840px;
    width: 100%;
    background-color: #fff;
    border-top: #cd0a2b solid 5px;
}
.widget-area:before{
    box-shadow: -15px 0 15px -15px inset;
    height: 100%;
    left: -15px;
    position: absolute;
    top: 0;
    width: 15px;
}
.widget-area:after{
    box-shadow: 15px 0 15px -15px inset;
    height: 100%;
    position: absolute;
    right: -15px;
    width: 15px;
}


.site-info {
    margin: 0 auto;
    max-width: 840px;
    padding: 30px 0;
    width: 100%;
    border-top: #cd0a2b solid 5px;
    background-color: #fff;
}
.site-info:before {
    box-shadow: -15px 0 15px -15px inset;
    height: 100%;
    left: -15px;
    position: absolute;
    top: 0;
    width: 15px;
}
.site-info:after {
    box-shadow: 15px 0 15px -15px inset;
    height: 100%;
    position: absolute;
    right: -15px;
    width: 15px;
}

还有 HTML

<article id="post-2" class="post-2 page type-page status-publish hentry">/article>

<div class="widget-area masonry" style="position: relative; height: 424px;"></div>

<div class="site-info"></div>

但无论出于何种原因，盒子阴影仅适用于小部件区域。我已经研究了几个小时，没有发现任何问题，但同样无法弄清楚如何让它发挥作用。

盒子阴影代码最初来自这个Jfiddle http://jsfiddle.net/Qq5tQ/

有什么想法吗？

编辑：解决方案

对！我已经修好了。解决方案是@Pete 使用position: relative;，但它需要的远不止这些。无论出于何种原因，所有box-shadow 类都需要content: " ";，这很好，除了我所有的afters 都缺少top: 0;。

在添加之后，我的.site-info 只需稍加打磨即可工作。同样，由于我不完全理解的原因，它距顶部大约 5 个像素（可能是我之前创建的填充问题），但通过更改 top 和 height 已解决，如下所示。

.site-info:before {
box-shadow: -15px 0 15px -15px inset;
height: 106%;
content: " ";
left: -15px;
position: absolute;
top: -5px;
width: 15px;
}

.site-info:after {
box-shadow: 15px 0 15px -15px inset;
height: 106%;
content: " ";
position: absolute;
right: -15px;
top: -5px;
width: 15px;
}

感谢所有帮助。没有你们，我不可能做到。

Answer 1

您没有名为.entry-header 的项目，这需要更改为.hentry，并且您需要将position:relative 添加到.site-info、.hentry 和.widget-area