我有一个DIV用作“分隔符”。
要求:
box-shadow
为它设置样式。问题:
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>
答案 0 :(得分:1)
您使用的5值box-shadow
速记设置了以下属性:
offset-x | offset-y | blur-radius | spread-radius | color
您的传播半径设置为-3px
。由于分隔符的高度为3px
,因此阴影的“高度”减小为0。
如果增加展开半径,将显示阴影。尝试以下方法:
box-shadow: 0 4px 3px 0px black
答案 1 :(得分:0)
在这种情况下,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>