javascript - 如何使底部框阴影延伸到整个标题
问题描述
我最近发现了如何让盒子阴影只出现在元素的一侧,但是,它并没有走完元素的全长,并且在两侧都停在屏幕边缘有点短的地方,如图所示在下面的代码片段和图像中。有没有人可以解决这个问题/甚至有可能让它一直延伸到整个过程吗?感谢所有帮助。
header {
box-shadow: 0 5px 7.5px -7.5px gray;
}
<header>Header Shadow Example</header>
解决方案
Box-shadow 会在元素本身上产生效果——因为你有身体的边距,你可以使用一个 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>
推荐阅读
- angular - Angular 6 ui-router 抛出“转换错误”
- node.js - 单击元素时从 mongodb 中删除特定的数组元素
- python - 导入 pandas python 时出错 - 找不到 DLL
- android - Retrofit2 不可接受的响应
- asp.net-core-webapi - 带有 ef 核心的 web api 核心中出现 404 错误
- reactjs - react native:状态更新对变换没有影响
- ios - 如何将 Json 数据从一个班级传递到另一个班级?
- javascript - Twilio - 根据时间戳过滤通话记录
- javascript - 打印 div 时引导样式不起作用
- javascript - 使用 redux-toolkit 时商店没有有效的 reducer