html - CSS box-shadow 仅显示有边距

Question

所以，我的网站有一个标题和一个包含革命滑块的 div。我正在尝试在标题下方和滑块上方添加一个框阴影。但它不起作用，除非我也添加margin-bottom到标题中 - 但这会使整个练习变得毫无意义。

这是代码：

#header {
  display:block;
  min-height: 99px;
  background: #FFFFFF;
  border-top: 3px solid #8dddcd;
  border-bottom: 1px solid #ecf0f1;
  line-height: 99px;
  box-shadow: 0 10px 10px 10px rgba(0,0,0,0.3);
}
#rev {
  position: relative;
}

<div id="header"></div>
<div id="rev">the slider</div>

有人可以帮我弄清楚是什么原因造成的吗？

Answer 1

请参阅以下问题：

• css 边框阴影是否添加到元素的大小
• css box-shadow 是元素盒子模型的一部分吗？

根据box-shadow 规范：

外框阴影投射阴影，就好像元素的边框框是不透明的一样。阴影仅绘制在边框边缘之外

因此，如果您不想重叠，则必须自己添加边距

#header {
  box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.3);
  margin-bottom: 10px;
}
#slider {
  position: relative;
}

<div id="header">Header</div>
<div id="slider">Slider</div>

Answer 2

实际上，这个问题原来与z-index不同 div 的属性有关。通过一些调整，我设法在不使用任何边距的情况下将其全部整理好。

无论如何，谢谢大家的时间和帮助！

Answer 3

如果您只需要标题下方和滑块上方的框阴影，您可以在框阴影的最后一个数字中使用减号，如下所示：

box-shadow: 0 10px 10px -10px rgba(0,0,0,0.3);

这将使盒子阴影只出现在底部。

工作示例：

#header {
  display:block;
  min-height: 99px;
  background: #FFFFFF;
  border-top: 3px solid #8dddcd;
  border-bottom: 1px solid #ecf0f1;
  line-height: 99px;
  box-shadow: 0 10px 10px -10px rgba(0,0,0,0.3);
}
#rev {
  position: relative;
}

<div id="header"></div>
<div id="rev">the slider</div>

Answer 4

当您使用 box-shadow（外阴影）的默认渲染模式时，您需要在该方向上添加一个边距（在您的示例中为 y 轴上 10px），以便溢出的框内容可见。如果您想在标题内显示您的盒子阴影，只需将关键字添加inset到您的声明中。