如何在不新增外层容器的情况下为固定最大宽度div模拟100%宽度背景

以下两种方案均无需额外嵌套容器div，可直接在现有元素基础上修改，且不需要额外适配媒体查询，自动兼容所有屏幕尺寸。

方案1：使用box-shadow实现（最简方案） #

仅需给现有div增加阴影属性，搭配根元素横向溢出隐藏即可实现：

/* 原有div样式保留，新增以下属性 */
div {
  box-shadow: 100vw 0 0 rgba(0,0,0,.50), -100vw 0 0 rgba(0,0,0,.50);
}
/* 全局新增横向溢出隐藏，避免出现横向滚动条 */
html, body {
  overflow-x: hidden;
}

实现原理：给div左右两侧各生成一个和当前div同高、同色的阴影，偏移距离为100视窗宽度，刚好填满div两侧所有空白区域。屏幕宽度小于1140px时阴影会被视口裁剪，不会影响小屏显示效果。

方案2：使用伪元素实现（兼容性最优） #

通过绝对定位的伪元素延伸背景，背景色直接继承父元素，后续修改无需同步调整两处颜色：

/* 原有div样式保留，新增以下属性 */
div {
  position: relative;
}
div::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background-color: inherit;
  z-index: -1;
}
/* 全局新增横向溢出隐藏，避免出现横向滚动条 */
html, body {
  overflow-x: hidden;
}

实现原理：生成一个和div同高、宽度为整个视窗宽度的伪元素，水平居中后放到div内容的下层，作为延伸的背景区域。

内容的提问来源于stack exchange，提问作者Jeff