如何用CSS实现子块间有边框但容器与子块间无边框效果

安全阿岳

2026-10-5

解决方案

核心思路通过容器裁剪+子元素负偏移实现通用适配，无需针对子元素位置单独设置样式，完美适配任意子元素数量、任意换行场景。

实现原理

容器新增overflow: hidden裁剪超出范围的内容
子元素仅保留右边框、下边框，避免边框重叠
所有子元素统一设置左上负偏移，偏移值等于边框宽度，抵消边框带来的宽度溢出，同时保证子元素边缘和容器边框完全贴合无间隙

完整代码

* { box-sizing: border-box; }

.container {
  display: flex;
  align-items: stretch;
  align-content: stretch;
  flex-wrap: wrap;   
  border: 2px solid green;
  margin-bottom: 1em;
  /* 新增：裁剪超出容器的内容 */
  overflow: hidden;
}

.block {
  background-color: yellow;
  /* 仅保留右边、下边框 */
  border-right: 1px solid red;
  border-bottom: 1px solid red;
  /* 新增：左上负偏移，抵消边框宽度影响 */
  margin-left: -1px;
  margin-top: -1px;
}

<div class="container">
  <div class="block" style="width: 50%;">Block1</div>
  <div class="block" style="width: 50%;">Block2</div>
</div>

<div class="container">
  <div class="block" style="width: 75%;">Block1</div>
  <div class="block" style="width: 25%;">Block2</div>
  <div class="block" style="width: 30%;">Block3</div>
  <div class="block" style="width: 70%;">Block4</div>
</div>