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

Question

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

要求：

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

问题：

• 我有一个外部布局 DIV，它将所有内容限制为 max-width = 500px;
• 我的标题不是fixed（它很粘，所以滚动后才变成fixed）。它以relative 开头，所以我可以absolute 定位分隔符。
• 我不得不用position: absolute 和width: 100vw 来制作分隔符DIV，所以让它跨越整个视口。

问题

• 如果我使用border-bottom 属性，它会按预期工作。它跨越视口的整个宽度（第一个 sn-p）。
• 但它不适用于box-shadow（不显示任何内容。第二个 sn-p）。为什么？在这种情况下是否可以使用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。这会将阴影的“高度”减小到 0，因为分隔符的高度是 3px。

如果你增加传播半径，阴影将会显示。试试这个：

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

Answer 2

不知何故，box-shadow 属性在这种情况下需要一些最小的height 渲染阴影。我设法找到了解决方案。请参阅下面的 sn-p。

.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>