如何使底部框阴影延伸到整个标题

【问题标题】：How to make the bottom box shadow stretch across the whole header如何使底部框阴影延伸到整个标题
【发布时间】：2021-02-19 18:28:56
【问题描述】：

我最近发现了如何让盒子阴影只显示在元素的一侧，但是，它并没有到达元素的全长，并且在两者上都停在离屏幕边缘有点短的地方侧面如代码 sn-p 和下图所示。有没有人可以解决这个问题/甚至有可能让它一直延伸到整个过程吗？感谢所有帮助。

header {
    box-shadow: 0 5px 7.5px -7.5px gray;
}

&lt;header&gt;Header Shadow Example&lt;/header&gt;

【问题讨论】：

我建议检查元素以检查框实际上是什么，并检查您的 CSS。你有-7.5px的传播。 Chrome 开发工具可以很好地可视化正在发生的事情。

标签： javascript html css shadow dropshadow

【解决方案1】：

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>

【讨论】：

我认为这是最直接的解决方案
或许我们应该使用CSS3语法::after
@Webber 嗯，对伪元素一无所知！ drafts.csswg.org/selectors-4/#pseudo-element-syntax
略微编辑以完整再现您的行为。请注意，body 或 html 属性可能具有 margin 或 padding。我已将其设置为 0 并明确将 15px 填充设置为 main，它包裹了 header。