为何修改元素高度会影响box-shadow效果？

原因 #

当元素高度仅为1px时，box-shadow: 0 0 10px red的模糊扩散范围在垂直方向被元素本身的高度限制，阴影无法在上下方向完整展开，视觉上呈现为一条窄带状阴影。随着元素高度增加，阴影有足够空间围绕元素四边扩散，因此视觉形态发生明显变化。

解决方案 #

如果要让阴影效果不随元素高度改变，可采用以下两种方式：

方案1：用伪元素承载阴影

将阴影放到独立的伪元素上，伪元素尺寸固定，不受原元素高度影响：

#shadow {
  width: 100px;
  height: 1px;
  background: #ccc;
  margin: 60px;
  position: relative;
}
#shadow::before {
  content: "";
  position: absolute;
  inset: -5px 0;
  box-shadow: 0 0 10px red;
  pointer-events: none;
}

方案2：拆分上下阴影

通过拆分阴影的上下部分，固定垂直方向的模糊范围：

#shadow {
  width: 100px;
  height: 1px;
  background: #ccc;
  box-shadow: 0 -5px 10px red, 0 5px 10px red;
  margin: 60px;
}

这样调整后，修改元素高度时阴影的视觉效果就会保持稳定。

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