没有在顶部或底部显示框阴影

我正在开发一个网站，我遇到了与三个不同部分的阴影底部的问题。我希望边框在所有三个边框中都显示出来，但它只显示在左侧和右侧。没有在顶部或底部显示框阴影

下面是该节的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; }

来源

2013-02-11 alexhoug

究竟什么是问题你问？（Stack Overflow遵循问答格式，在这种情况下，我不完全清楚问题部分。） – dgvid 2013-02-11 18:49:12

@aleshoug - 删除您的网站的链接并不会让它变得秘密;人们仍然可以通过查看编辑历史来看到它。把相关的代码放在问题上总是比较好，而且不要使用活动链接。 – KatieK 2013-02-11 20:53:27

你有两个选择：

删除overflow: hidden从所有的父母节点，因为这是削减你的影子。在你的情况下，从以下选择器中删除它：.row,.column和.three-cols。
您可以为您的：.three-cols-col添加一些垂直边距。而不是：margin: 0 16px 0 16px;你可以把：margin: 16px 16px 16px 16px;。

这两种选择均在Google Chrome上测试过。

来源

2013-02-11 18:48:50

我选择了第二个选项，它的工作完美无瑕。非常感谢！ – alexhoug 2013-02-11 19:49:29

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

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

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

来源

2013-02-11 19:12:04 KatieK

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

position: relative;

来源

2014-05-26 09:41:44 isxaker

-1

position: relative; 
z-index: 2;

来源

2018-02-11 12:17:13

位置和z-索引如何改变阴影？请详细说明您的答案，以便它可以帮助OP。 – Syfer 2018-02-11 13:16:44

虽然这段代码可能会回答这个问题，但提供关于**如何**和**为什么**的其他上下文可以解决问题，这将提高答案的长期价值。 – Alexander 2018-02-11 17:09:55

没有在顶部或底部显示框阴影

回答

相关问题