顶部和底部的框阴影

Question

我有以下带有效果的框阴影。现在元素的顶部有框阴影效果（见附件），但底部没有相同的效果。

我怎样才能使元素的底部看起来与元素的顶部完全一样。 （见附图）

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

Answer 1

这是你的阴影设置应用于500px x 200px的DIV：

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

如果（在该代码中）您将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>