如何在弹性项目及其容器周围创建“折叠”边框？

Question

我有以下布局：

 #limited-width {
  width: 100%;
  max-width: 200px;
  margin: 0 auto;
  font-size: 18px;
}
ul {
  display: flex;
  flex-flow: row wrap;
  list-style: none;
  padding: 0;
  margin: 20px;
}
ul > li {
  display: block;
  text-align: center;
  flex: 1 0 auto;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 4px 7px;
  border: 2px solid rgba(0,0,0,.3);
  background-color: rgba(0,0,0,.03);
}

 <div id="limited-width">
  <ul>
    <li>Apple</li>
    <li>Orange</li>
    <li>Pineapple</li>
    <li>Banana</li>
    <li>Tomato</li>
    <li>Pear</li>
    <li>Lemon</li>
  </ul>
</div>

如您所见， ul 内的列表项的边框宽度为 2px ，但正因为如此，元素之间的边框加倍。我正在寻找一种方法使元素之间的边框宽度相同，同时使用 flexbox 保持外部边框相同（类似于 border-collapse 在表格上的工作方式）。这可能吗？如果可以，怎么做？

原文由 SeinopSys 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

有两种主要方法可以实现这一目标。在每种方法下，您都会找到一个工作演示，您可以展开它来查看它的行为方式。将鼠标悬停在元素上会给它们一个红色边框，以便更轻松地选择最适合您的方法。

父子边框对齐

您需要像这样定义边框：

 ul, ul > li {
  border-style: solid;
  border-color: rgba(0,0,0,.3);
}
ul      { border-width: 2px  0   0  2px }
ul > li { border-width:  0  2px 2px  0  }

这里的关键在于 border-width 属性：

• 在容器上， top 和 left 的值设置为所需大小，而 right 0 bottom ---
• On the items, the values for the right and bottom are set to the desired size while the top and left are set to 0

通过这样做，边框将以某种方式叠加在一起，从而在元素和容器周围形成一个很好的折叠、一致的边框。

 :hover { border-color: red }
#limited-width {
  width: 100%;
  max-width: 200px;
  margin: 0 auto;
  font-size: 18px;
}
ul, ul > li {
  border-style: solid;
  border-color: rgba(0,0,0,.3);
}
ul {
  display: flex;
  flex-flow: row wrap;
  list-style: none;
  padding: 0;
  margin: 20px;
  border-width: 2px 0 0 2px;
}
ul > li {
  display: block;
  text-align: center;
  flex: 1 0 auto;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 4px 7px;
  border-width: 0 2px 2px 0;
  background-color: rgba(0,0,0,.03);
}

 <div id="limited-width">
  <ul>
    <li>Apple</li>
    <li>Orange</li>
    <li>Pineapple</li>
    <li>Banana</li>
    <li>Tomato</li>
    <li>Pear</li>
    <li>Lemon</li>
  </ul>
</div>

将边界减半

如果您出于任何目的想要为每个元素设置不同的边界，这可能是适合您需求的折衷方案。给定所需的 border-width 的 2px CSS 如下：

 ul, ul > li {
  border: 1px solid rgba(0,0,0,.3);
}

此方法在父项及其子项上设置所需边框宽度的一半，使最终边框 2px 厚。小心使用这种带有小数像素的方法（例如 1.5px ），因为您可能会 遇到问题。

当使用 border-color 更改规则时，半角会很明显，但是如果您想要更好看的边框，这是比第一种更好的方法。

 :hover { border-color: red }
#limited-width {
  width: 100%;
  max-width: 200px;
  margin: 0 auto;
  font-size: 18px;
}
ul, ul > li {
  border: 1px solid rgba(0,0,0,.3);
}
ul {
  display: flex;
  flex-flow: row wrap;
  list-style: none;
  padding: 0;
  margin: 20px;
}
ul > li {
  display: block;
  text-align: center;
  flex: 1 0 auto;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 4px 7px;
  background-color: rgba(0,0,0,.03);
}

 <div id="limited-width">
  <ul>
    <li>Apple</li>
    <li>Orange</li>
    <li>Pineapple</li>
    <li>Banana</li>
    <li>Tomato</li>
    <li>Pear</li>
    <li>Lemon</li>
  </ul>
</div>

原文由 SeinopSys 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我希望这个评论会有所帮助，但我的意愿是对@jon-onstott 做出回应

您的回答帮助我解决了类似的案例。我注意到您使用了嵌入阴影（我想知道这是否就是您不需要修复其余角落（左上角、右上角和左下角）的原因，但我很确定如果您的所有阴影都是一开始。

我必须解决的另一点（就我而言）是我用于阴影的颜色使用了透明度（不是 100% 不透明），所以同级框弄乱了颜色。我使用插入剪辑路径修复了它，在需要显示阴影的那一侧有负值。

我没有显示任何代码，因为它解决了问题*中没有提到的情况，但我仍然认为这可以帮助任何人（起初）错误地在这里寻找解决类似问题的解决方案。

*：我的案例是一组格式良好的框，具有确定的列和行的大小。这就是为什么我知道哪些盒子需要显示阴影。尝试在 flexbox 中解决我的问题是没有意义的，因为 flexbox 的形状取决于包含它的可用空间。

原文由 t33st33r 发布，翻译遵循 CC BY-SA 4.0 许可协议