CSS box-shadow 只出现边距

Question

因此，我的网站紧随其后有一个 header 和一个包含 Revolution Slider 的 div。我正在尝试在 header 下方和滑块上方添加一个 box-shadow。但它不起作用，除非我也将 margin-bottom 添加到 header - 但这会使整个练习变得毫无意义。

这是代码：

#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

当你使用box-shadow（外阴影）的默认渲染模式时，你需要在那个方向添加一个边距（在你的例子中y-axis上10px）这样溢出的盒子内容就会可见。如果您想在 header 内显示框阴影，只需在声明中添加关键字 inset。

Answer 2

查看以下问题：

Does css border-shadow add to an element's size
Is css box-shadow part of element's box model?

根据 box-shadow spec:

An outer box-shadow casts a shadow as if the border-box of the element were opaque. The shadow is drawn outside the border edge only

所以如果你不想重叠，你必须自己添加边距

#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 3

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

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

这将使 box-shadow 仅出现在底部。

工作示例：

#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

实际上，问题与不同 div 的 z-index 属性有关。通过一些调整，我设法在不使用任何边距的情况下解决了所有问题。

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

CSS box-shadow 只出现边距

CSS box-shadow appears only with margin

html

css

box-shadow