頂部和底部的盒子陰影

Question

我有以下附帶效果的盒子陰影。現在，元素的頂部有盒子陰影效果（請參閱附件），但底部不具有相同的效果。

我怎樣才能讓它的元素的底部看起來完全像元素的頂部。 （見所附的圖像）

box-shadow: 0px 0px 60px -18px #CACACA; 

Answer 1

這裏應用於DIV這500像素X 200像素的陰影值：

http://codepen.io/anon/pen/aNxWgE

如果（在codepen）你改變margin: 100px auto;到margin: 0 auto;，你不會再看到頂部的影子了。如果您擦除width（從而使DIV 100％寬），您將不會再看到側面陰影。所以可能類似的事情發生在你的底部陰影。

爲避免這種情況，請使用至少與陰影一樣寬的邊距。

Answer 2

我們還沒有足夠的相關信息告訴你，你真的去錯了，但：

• 如果影子太淡和蔓延，你可能看不到它
• 當你縮減了一層陰影，你需要夠的高度和寬度所以它可以製造

body * { 
 
    box-shadow: 0px 0px 60px -18px #000; 
 
    background:white; 
 
    margin: 2em; 
 
} 
 

 
.minH { 
 
    min-height: 38px; 
 
    box-shadow: 0 0 60px -18px #000;/* black to make see it better */ 
 
} 
 
.show { 
 
    float:left; 
 
    margin-left:2em; 
 
    height:60px; 
 
    width:60px; 
 
    /* even then , black blured on 60px doesn't show much;*/ 
 
    } 
 
    .show + .show { 
 
    height:120px; 
 
    width:120px; 
 
    /* even then , black blured on 60px doesn't show much; 
 
    } 
 

<hr/> 
 
<p>hello</p> 
 
<div></div> 
 

 
<p class="minH">min-height is necessary to give room to draw box-shadow: here - 18px on each sides makes a min width and height of 18x2 =36px <b>But it will start to show at 37px if your eye can see it </b></p> 
 
<p class="show">make bigger to show</p><p class="show">make twice bigger to show</p>

---

要通過例如發生了什麼明白： 偏移陰影遠遠不夠，沒有模糊，看它是否是有還是沒有和它多大（使用黑色再次）

懸停片段來激活模糊效果並查看變成60px - 18px黑色陰影。

body { 
 
    display: flex; 
 
    justify-content: space-around; 
 
    background: gold; 
 
} 
 
div { 
 
    box-sizing: border-box; 
 
    height: 20px; 
 
    width: 20px; 
 
    background: gray; 
 
    box-shadow: 0 65px 0 -18px; 
 
} 
 
div:nth-child(2) { 
 
    height: 36px; 
 
    width: 36px; 
 
} 
 
div:nth-child(3) { 
 
    height: 38px; 
 
    width: 38px; 
 
} 
 
div:nth-child(4) { 
 
    height: 60px; 
 
    width: 60px; 
 
} 
 

 
/* add blur on hover */ 
 
html:hover div { 
 
    box-shadow: 0 65px 60px -18px; 
 
}

<div>20px</div> 
 
<div>36px</div> 
 
<div>38px</div> 
 
<div>60px</div>