html – CSS box-shadow仅显示边距

发布时间：2020-12-14 18:30:47 所属栏目：资源来源：网络整理

导读：因此,我的网站有一个标题和一个包含Revolution Slider的div.我正在尝试在标题下方添加一个框阴影 – 并在滑块上方.但它不起作用,除非我还在标题中添加了margin-bottom – 但这使得整个练习没有实际意义. 这是代码： #header { display:block; min-height: 99

因此,我的网站有一个标题和一个包含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.3);
}
#rev {
  position: relative;
}

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

有人可以帮我找出造成这种情况的原因吗？

解决方法

请参阅以下问题：

> 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.3);
  margin-bottom: 10px;
}
#slider {
  position: relative;
}

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!