沒有在頂部或底部顯示框陰影

我正在開發一個網站，我遇到了與三個不同部分的陰影底部的問題。我希望邊框在所有三個邊框中都顯示出來，但它只顯示在左側和右側。沒有在頂部或底部顯示框陰影

下面是該節的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

沒有在頂部或底部顯示框陰影

回答

相關問題