Css 盒子阴影不显示在顶部或底部

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

以下是该部分的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>

.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; }

你有两个选择：

从所有父节点中删除

溢出：隐藏

，因为这将剪裁阴影。在您的情况下，请将其从以下选择器中删除：

.row

、

.column

和

。三列

您只需将一些垂直边距添加到：

。三列

。代替：

margin:0 16px 0 16px你可以把：
边距：16px 16px 16px 16px

---

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

您的3个框（

.three cols row

）的父元素没有足够的空间显示其子框顶部和底部的文本阴影。尝试添加一些填充：

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

---

示例JS Fiddle:

下面的语句决定了一个类似的问题：

position: relative;

---

你问的问题到底是什么？（堆栈溢出遵循问答格式，我不完全清楚本例中的问题部分。）@aleshoug-删除站点链接不会使其成为秘密；人们仍然可以通过查看编辑历史来查看它。把相关的代码放在这里总是比较好的，而且无论如何也不要使用实时链接。非常感谢！位置和z索引如何改变阴影？请详细说明您的答案，以帮助OP。虽然此代码可能会回答问题，但提供有关如何以及为什么解决问题的附加上下文将提高答案的长期价值。

position: relative;
z-index: 2;