1

这是我正在使用的 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's using position: relative;，但它需要的远不止这些。无论出于何种原因，他们box-shadow需要的所有课程content: " ";，这很好，除了我所有的之后都不见了top: 0;。

在添加之后，我的工作只是一点点抛光.site-info。同样，由于我不完全理解的原因，它距顶部大约 5 个像素（可能是我之前创建的填充问题），但通过更改topand已修复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;
}

感谢所有的帮助。没有你们俩，我做不到。

4

1 回答 1

1

您没有一个名为.entry-headerthis 的项目需要更改为.hentry，您需要添加position:relative到.site-info,.hentry和.widget-area

于 2013-11-05T16:28:34.093 回答