Question

所以，我的网站后面有一个标题和一个包含Revolution Slider的div。我试图在标题下方添加一个盒子阴影 - 并在滑块上方添加。但它不起作用，除非我还在标题中添加margin-bottom - 但这使得整个练习没有实际意义。

这是代码：

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

有人可以帮我弄清楚导致这种情况的原因吗？

Answer 1

请参阅以下问题：

根据box-shadow spec：

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

因此，如果您不想重叠，则必须自己添加保证金

#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

实际上，该问题与不同div的z-index属性有关。通过一些调整，我设法将所有内容整理出来而不使用任何余量。

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

Answer 3

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

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

这将使盒子阴影仅显示在底部。

工作示例：

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 4

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

CSS box-shadow仅显示边距

4 个答案: