如何让底框阴影横跨整个header
How to make the bottom box shadow stretch across the whole header
我最近发现了如何让框阴影只出现在元素的一侧,但是,它并没有延伸到元素的整个长度,并且在离屏幕边缘有点短的地方停止了在两侧,如下面的代码片段和图像所示。有没有人修复 this/is 甚至可以让它一直延伸?感谢所有帮助。
header {
box-shadow: 0 5px 7.5px -7.5px gray;
}
<header>Header Shadow Example</header>
Box-shadow 对元素本身产生影响——因为您从 body 开始有边距,您可以使用具有负左值和负右值的 psuedo:after 元素来覆盖它距离.
body {
margin: 0;
padding: 0;
}
main {
margin: 0;
padding: 0 15px;
}
header {
position:relative;
}
header::after {
position: absolute;
content: "";
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: 0 -15px;
box-shadow: 0 3px 3px grey;
}
<main>
<header>Header Shadow Example</header>
</main>
我最近发现了如何让框阴影只出现在元素的一侧,但是,它并没有延伸到元素的整个长度,并且在离屏幕边缘有点短的地方停止了在两侧,如下面的代码片段和图像所示。有没有人修复 this/is 甚至可以让它一直延伸?感谢所有帮助。
header {
box-shadow: 0 5px 7.5px -7.5px gray;
}
<header>Header Shadow Example</header>
Box-shadow 对元素本身产生影响——因为您从 body 开始有边距,您可以使用具有负左值和负右值的 psuedo:after 元素来覆盖它距离.
body {
margin: 0;
padding: 0;
}
main {
margin: 0;
padding: 0 15px;
}
header {
position:relative;
}
header::after {
position: absolute;
content: "";
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: 0 -15px;
box-shadow: 0 3px 3px grey;
}
<main>
<header>Header Shadow Example</header>
</main>