html - 如何使父边框覆盖其子边框？

Question

我需要帮助解决我的 CSS 问题。我有一个父 div 元素及其子 div。两者都有一个大小相同但颜色不同的边框。我想要实现的是父母的边框覆盖它的孩子。

<div class="parent">
  <div class="child" />
</div>

我的 CSS

.parent {
  border: 1px solid red;
}

.child {
  width: 50px;
  height: 50px;
  border: 1px solid green;
}

使用上面的 CSS，孩子的绿色边框仍然可见。我试图给父母padding: -1px希望它会隐藏边界，但没有运气。如何实现？还是不可能？

score 0 · Accepted Answer

使用轮廓而不是边框：

.parent {
  outline: 1px solid red;
}

.child {
  width: 50px;
  height: 50px;
  outline: 1px solid green;
}

<div class="parent">
  <div class="child"></div>
</div>

1 回答 1