如何为同行多个div设置无间隙box-shadow模拟父元素阴影

完全可以通过子元素阴影拼接实现，核心是拆分阴影分布逻辑，消除接缝间隙。

核心思路 #

• 上下方向阴影：所有子元素统一添加相同参数的上下阴影，通过边缘轻微重叠消除相邻阴影的接缝
• 左右方向阴影：仅给首个子元素加左阴影、最后一个子元素加右阴影，中间子元素不添加左右方向阴影，避免接缝处出现多余阴影
• 用1px负边距让相邻子元素轻微重叠，依靠统一的纯色背景遮挡中间子元素左右边缘的阴影模糊溢出，视觉上无任何影响

修改后的代码 #

.container {
  /* 严格不添加box-shadow，符合限制 */
  display: flex;
  flex-direction: row;
}

.child {
  position: relative;
  background-color: grey;
  width: 160px;
  height: 90px;
  /* 统一上下阴影参数，保证拼接连续 */
  box-shadow: 0 -5px 5px 0 rgba(0, 0, 0, 0.3), 0 5px 5px 0 rgba(0, 0, 0, 0.3);
}

/* 相邻子元素左移1px，轻微重叠消除接缝 */
.child + .child {
  margin-left: -1px;
}

/* 首个子元素额外添加左阴影 */
.child:first-child {
  box-shadow: -5px 0 5px 0 rgba(0, 0, 0, 0.3), 0 -5px 5px 0 rgba(0, 0, 0, 0.3), 0 5px 5px 0 rgba(0, 0, 0, 0.3);
}

/* 最后一个子元素额外添加右阴影 */
.child:last-child {
  box-shadow: 5px 0 5px 0 rgba(0, 0, 0, 0.3), 0 -5px 5px 0 rgba(0, 0, 0, 0.3), 0 5px 5px 0 rgba(0, 0, 0, 0.3);
}

HTML代码无需修改，保持原有结构即可。

原写法的问题说明 #

你之前给阴影设置了-5px的扩散半径（spread-radius），导致每个子元素的阴影比自身宽度窄10px，相邻子元素的阴影之间自然出现了10px宽的间隙。现在去掉负扩散值后，阴影会和子元素同宽，配合1px的重叠，就能完全拼接成和父元素直接加阴影一致的效果。

如果需要调整阴影的偏移、模糊程度，只需要统一修改所有阴影的参数即可，必须保证所有子元素的上下阴影参数完全一致，避免拼接后出现断层。

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