顶部和底部的盒子阴影

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>