如何为Flex元素集群添加外围box-shadow阴影

给每个胶囊套一个外层容器，把阴影加在这个容器上，既能保留内部Flex布局的宽度一致性，又能实现整个胶囊外围的阴影效果，具体操作如下：

• 外层容器用display: inline-block，让它自适应内部Flex内容的宽度，同时设置border-radius和box-shadow，再加overflow: hidden确保内部元素不突破圆角。
• 内部原来的Flex容器保持display: flex，这样各子元素的宽度比例不会被破坏。

示例代码：

<div class="capsule-wrapper">
  <div class="flex-container">
    <div class="flex-part">左侧内容</div>
    <div class="flex-part">中间内容</div>
    <div class="flex-part">右侧内容</div>
  </div>
</div>

.capsule-wrapper {
  display: inline-block;
  border-radius: 24px; /* 胶囊圆角大小 */
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); /* 外层阴影 */
  overflow: hidden;
}

.flex-container {
  display: flex;
}

.flex-part {
  padding: 10px 18px;
  /* 按需求设置各部分的宽度比例 */
  flex: 1;
}

/* 可以给不同部分加背景色区分 */
.flex-part:nth-child(1) { background: #f0f0f0; }
.flex-part:nth-child(2) { background: #e0e0e0; }
.flex-part:nth-child(3) { background: #d0d0d0; }

这个方案的核心是把阴影容器和布局容器分开：外层管阴影和胶囊形状，内层管Flex布局，完美解决之前两种方案的问题——既不会因为块级容器撑满宽度，也不会因为inline-flex破坏内部元素的宽度一致性，最终实现整个胶囊外围只有一层阴影的效果。

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