Question

我有一个DIV用作“分隔符”。

要求：

该分隔符应放在标题的底部。
我需要该分隔符跨越整个视口宽度。
我需要在其上使用box-shadow为它设置样式。

问题：

我有一个外部布局DIV，将所有内容限制为max-width = 500px;
我的标题不是fixed（它是粘性的，因此经过一些滚动后才变成fixed）。它以relative开始，所以我可以absolute放置分隔符。
我必须使用position: absolute和width: 100vw来制作分隔符DIV，以便使用它来覆盖整个视口。

问题

如果我使用border-bottom属性，它将按预期工作。它跨视口的整个宽度（第一个代码段）。
但是它不适用于box-shadow（什么都没有显示。第二段）。为什么？在这种情况下是否可以使其与box-shadow一起使用？

SNIPPET：可与border-bottom

一起使用

.layout {
  width: 100%;
  max-width: 500px;
  margin: auto;
}

.header {
  height: 120px;
  background-color: lightblue;
  position: relative;
}

.separator {
  position: absolute;
  width: 100vw;
  height: 3px;
  top: 100%;
  border-bottom: 1px solid black;
  /*box-shadow: 0 4px 3px -3px black;*/
	left: 50%;
	transform: translate(-50%, -50%);
}

.main {
  height: 150px;
  background-color: lightgreen;
}

<div class="layout">
  <div class="header">
    Header
    <div class="separator"></div>
  </div>
  <div class="main">
    Main
  </div>
</div>

SNIPPET：不适用于box-shadow

.layout {
  width: 100%;
  max-width: 500px;
  margin: auto;
}

.header {
  height: 120px;
  background-color: lightblue;
  position: relative;
}

.separator {
  position: absolute;
  width: 100vw;
  height: 3px;
  top: 100%;
  /*border-bottom: 1px solid black;*/
  box-shadow: 0 4px 3px -3px black;
	left: 50%;
	transform: translate(-50%, -50%);
}

.main {
  height: 150px;
  background-color: lightgreen;
}

<div class="layout">
  <div class="header">
    Header
    <div class="separator"></div>
  </div>
  <div class="main">
    Main
  </div>
</div>

Answer 1

您使用的5值box-shadow速记设置了以下属性：

offset-x | offset-y | blur-radius | spread-radius | color

您的传播半径设置为-3px。由于分隔符的高度为3px，因此阴影的“高度”减小为0。

如果增加展开半径，将显示阴影。尝试以下方法：

box-shadow: 0 4px 3px 0px black

Answer 2

在这种情况下，box-shadow属性需要某种程度的最小height渲染阴影。我设法找到了解决方案。请参见下面的代码段。

.layout {
  width: 100%;
  max-width: 500px;
  margin: auto;
}

.header {
  height: 120px;
  background-color: lightblue;
  position: relative;
}

.separator {
  position: absolute;
  width: 100vw;
  height: 10%;
  top: 95%;
  /*border-bottom: 1px solid black;*/
  box-shadow: 0 4px 3px -3px black;
	left: 50%;
	transform: translate(-50%, -50%);
}

.main {
  height: 150px;
  background-color: lightgreen;
}

<div class="layout">
  <div class="header">
    Header
    <div class="separator"></div>
  </div>
  <div class="main">
    Main
  </div>
</div>

绝对位置div上的框阴影没有内容？

2 个答案: