CSS box-shadow仅显示边距

Question

所以，我的网站有一个标题和一个包含Revolution Slider的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 border-shadow是否添加到元素的大小
• css 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

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

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

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

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