Question

我正在开发一个网站，我遇到了一个问题，底部是三个不同部分的盒子阴影。我希望边框显示在所有三个边框上，但它只显示在左侧和右侧。

以下是该部分的HTML：

<div class="three-cols-row">

<div class="three-cols-col three-cols">
<p style="text-align: center;"><img src="https://www.lytyx.com/subdomains/test/websites/mynaturerich.com/wp-content/uploads/2013/02/section01.jpg" alt="" /></p>
<p style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. <a href="#">Read More</a></p>

</div>
<div class="three-cols-col three-cols">
<p style="text-align: center;"><img src="https://www.lytyx.com/subdomains/test/websites/mynaturerich.com/wp-content/uploads/2013/02/section02.jpg" alt="" /></p>
<p style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. <a href="#">Read More</a></p>

</div>
<div class="three-cols-col three-cols">
<p style="text-align: center;"><img src="https://www.lytyx.com/subdomains/test/websites/mynaturerich.com/wp-content/uploads/2013/02/section03.jpg" alt="" /></p>
<p style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. <a href="#">Read More</a></p>

</div>
</div>
<div class="clearboth"></div>

以下是该部分的CSS：

.three-cols-col{ margin:0 16px 0 16px; overflow:hidden; float:left; display:inline; }
.three-cols-row { margin:0 auto; width:960px; overflow:hidden; }
.three-cols-row .three-cols-row { margin:0 -16px 0 -16px; width:auto; display:inline-block; }
.three-cols { width:248px; padding: 15px; background: #fff; -moz-box-shadow: 0 0 3px #d4d4d4;-webkit-box-shadow: 0 0 3px #d4d4d4; box-shadow: 0 0 3px #d4d4d4; }

Answer 1

您有两种选择：

从所有父节点中删除overflow: hidden，因为这会剪切阴影。在您的情况下，请将其从以下选择器中删除：.row，.column和.three-cols。
您只需为.three-cols-col添加一些垂直边距即可。而不是：margin: 0 16px 0 16px;您可以放置：margin: 16px 16px 16px 16px;。

这两个选项都在Google Chrome上进行了测试。

Answer 2

以下陈述已经确定了类似的问题：

position: relative;

Answer 3

3个框（.three-cols-row）的父元素没有足够的空间来显示其子项顶部和底部存在的文本阴影。尝试添加一些填充：

.three-cols-row { padding-top: 10px; padding-bottom: 10px; }

示例JS小提琴：http://jsfiddle.net/KatieK/zZhxr/1/

Answer 4

position: relative;
z-index: 2;

箱子阴影没有显示在顶部或底部

4 个答案: