带背景的父Div中实现仅内圆角边框的子Div

你可以通过内阴影（box-shadow: inset）或伪元素的方式实现需求，无需多层嵌套元素，且能避免细边框时圆角空隙的问题。

方法一：使用内阴影（最简方案） #

利用内阴影模拟内圆角边框，元素本身透明以透出父元素背景：

<div class='parent'>
  <div class='child'>
    baba
  </div>
</div>

.parent {
  height: 100px;
  width: 100px;
  background: green; /* 可替换为背景图 */
  padding: 2px; /* 与内阴影宽度一致，控制边框与父容器的间距 */
}

.child {
  width: 100%;
  height: 100%;
  border-radius: 16px; /* 内圆角半径 */
  box-shadow: inset 0 0 0 2px black; /* inset表示内阴影，最后一个值为边框宽度 */
  padding: 10px; /* 可选：控制文字与边框的间距 */
  box-sizing: border-box;
}

方法二：使用伪元素（更灵活） #

通过伪元素生成圆角边框，便于单独控制边框样式：

<div class='parent'>
  <div class='child'>
    baba
  </div>
</div>

.parent {
  height: 100px;
  width: 100px;
  background: green;
  position: relative;
}

.child {
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  margin: 2px; /* 边框宽度，控制边框与父容器的间距 */
  border-radius: 16px;
  position: relative;
  z-index: 1;
  padding: 10px;
  box-sizing: border-box;
}

.child::before {
  content: '';
  position: absolute;
  inset: -2px; /* 向外扩展边框宽度 */
  border-radius: 16px;
  border: 2px solid black;
  z-index: -1;
}

原方案问题说明 #

你之前用两层边框叠加的方式，由于border-radius的曲线是基于元素自身尺寸计算的，偏移后的第二层边框无法完全填补第一层圆角的空隙，尤其当边框较细时，空隙会更明显。上述两种方法通过单一元素或伪元素实现，能保证圆角曲线完全贴合，不会出现空隙。

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