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: " ";，这很好，除了我的所有后遗失top: 0;。

添加之后，只需要进行一些抛光即可让.site-info工作。同样，由于我没有完全理解的原因，它从顶部大约五个像素（可能是我之前创建的填充问题），但通过更改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

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

1 个答案: