Html 无内容的绝对定位div上的框阴影？

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

要求：

• 该分隔符应放置在收割台的底部
• 我需要分隔符跨越整个视口宽度
• 我需要在其上使用

  box shadow

  设置样式

问题：

• 我有一个外部布局DIV，它将所有内容限制为

  max width=500px

• 我的标题不是

  固定的

  （它是粘性的，所以只有在一些滚动之后才会变成

  固定的

  ）。它以

  相对

  开头，因此我可以

  绝对

  定位分隔符
• 我必须使用

  位置：绝对

  和

  宽度：100vw

  来创建分隔符DIV，因此使其跨越整个视口

问题

• 如果我使用

  border bottom

  属性，它可以正常工作。它跨越视口的整个宽度（第一个片段）
• 但它不适用于

  框阴影

  （不显示任何内容。第二段代码）。为什么？在这种情况下，是否可以使用

  box shadow

代码片段：用于

边框底部

.layout{
宽度：100%；
最大宽度：500px；
保证金：自动；
}
.标题{
高度：120px；
背景颜色：浅蓝色；
位置：相对位置；
}
.分离器{
位置：绝对位置；
宽度：100vw；
高度：3倍；
最高：100%；
边框底部：1px纯黑；
/*盒影：0 4px 3px-3px黑色*/
左：50%；
转换：翻译（-50%，-50%）；
}
梅因先生{
高度：150像素；
背景颜色：浅绿色；
}

标题
主要

您正在使用的5值

框阴影

速记设置以下属性：

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

您的排列半径设置为

-3px

。这会将阴影的“高度”减小到0，因为分隔符的高度是

3px

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

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

---

在这种情况下，

box shadow

属性需要一些最小的

高度

渲染阴影。我设法找到了解决办法。请参阅下面的代码片段

.layout{
宽度：100%；
最大宽度：500px；
保证金：自动；
}
.标题{
高度：120px；
背景颜色：浅蓝色；
位置：相对位置；
}
.分离器{
位置：绝对位置；
宽度：100vw；
身高：10%；
最高：95%；
/*边框底部：1px纯黑*/
盒影：0 4px 3px-3px黑色；
左：50%；
转换：翻译（-50%，-50%）；
}
梅因先生{
高度：150像素；
背景颜色：浅绿色；
}

标题
主要

我可以将box shadon设置为

标题

it self。。这就是我在需要“粘性”标题之前所做的。但现在，我的标题开始为

static/relative

，只有经过一些滚动之后，它才会变成

fixed

。当它处于

fixed

“阶段”时，没有任何错误。它肯定会跨越整个视口。但是当它是静态/相对的时，我的外部布局div限制了它的宽度。我的计划B是去掉Layout div并将

max width

属性传递给它的子级。但是我喜欢在一个地方控制我网站的

最大宽度的想法。你说得对。我这样做是因为我只需要在底部有一个阴影。它在其他部门工作。完全相同的盒子阴影。为什么这一个不起作用？你知道吗？它在做其他哪个部门的工作
0 2px 3px-1px black
将阴影移动到分隔符的底部。如果设置更大的高度，则效果会更好。该oposite
3px和-3px
可以隐藏阴影的顶部。但不知何故，它只适用于有一定高度的div。尝试保持我的原点
框阴影
，并增加分隔符div的
高度
。阴影将显示！你的回答帮助我到达了那里。看看下面我的答案，看看我到底是怎么做的。使用我使用的相同的
box shadow
。非常感谢。请看这个问题：这并不完全正确，只要排列至少为
1px
@ZohirSalak，您就可以避开
0高度
，但它会同时分布在顶部和底部吗？在这种情况下，我只需要底部阴影。你可以使用偏移来定位它。