如何让相邻卡片的box-shadow不重叠，实现视觉合并效果？

不需要依赖卡片数量或复杂选择器，用以下简单CSS就能实现需求：

/* 基础卡片样式，设置阴影和背景色 */
.cms-card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* 示例阴影，可根据需求调整参数 */
  margin-bottom: -8px; /* 数值等于阴影的模糊半径，让卡片重叠遮盖阴影区域 */
  background-color: #ffffff; /* 必须设置不透明背景，否则阴影会透出来 */
  padding: 16px; /* 示例内边距，根据实际布局调整 */
}

/* 最后一个卡片取消负margin，避免影响下方其他元素 */
.cms-card:last-child {
  margin-bottom: 0;
}

原理说明 #

1. 给所有卡片设置负margin，让相邻卡片垂直重叠，重叠范围刚好覆盖阴影区域；
2. 卡片的不透明背景会盖住下方卡片的顶部阴影，同时上方卡片的底部阴影也会被下方卡片的背景遮盖；
3. 最终仅保留最顶部卡片的顶部阴影、最底部卡片的底部阴影，以及所有卡片的左右阴影，视觉上就像一个完整容器的阴影效果。

适配水平排列的情况 #

如果卡片是水平布局，只需调整margin方向和阴影方向即可：

.cms-card {
  display: inline-block;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
  margin-left: -8px;
  background-color: #ffffff;
}

/* 第一个卡片取消左侧负margin，避免偏移 */
.cms-card:first-child {
  margin-left: 0;
}

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