如何实现box-shadow背景固定，不随页面滚动发生变化？

问题原因 #

1. 你为html和body设置了固定高度height: 100vh，这会导致body的高度只能等于当前视口的高度，当页面内容超出一屏长度时，超出部分不属于body的渲染范围，自然不会展示box-shadow效果。
2. background-attachment: fixed是用于控制背景图片滚动行为的属性，对box-shadow完全不生效，属于冗余属性。

解决方案 #

根据你需要的效果二选一即可：

方案1：阴影跟随页面整体渲染 #

阴影会铺满整个页面的上下边缘，滚动时随页面一同移动，适合需要整个页面边缘都有阴影的场景：

html,
body {
  /* 将固定高度改为最小高度，body会随内容长度自适应增高 */
  min-height: 100vh;
  /* 去掉浏览器默认边距，避免阴影偏移 */
  margin: 0;
}

body {
  box-shadow: inset 0 0 100px 20px #ED1A24;
  text-align: center;
  font-family: 'Palatino Linotype';
}

方案2：阴影固定在视口 #

阴影始终固定在当前屏幕的四周，不管怎么滚动都不会变化，符合你说的「背景保持固定状态」的需求：

html,
body {
  min-height: 100vh;
  margin: 0;
}

/* 新增固定定位的伪元素承载阴影，不影响原有页面布局和交互 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  box-shadow: inset 0 0 100px 20px #ED1A24;
  /* 避免伪元素挡住页面的点击、选中等交互 */
  pointer-events: none;
  /* 确保阴影展示在最上层 */
  z-index: 999;
}

body {
  text-align: center;
  font-family: 'Palatino Linotype';
}

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