如何使父母的边界覆盖孩子的边界？

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希望它将隐藏边框，但没有运气。如何实现呢？还是不可能？

Answer 1

使用轮廓线代替边​​框：

.parent {
  outline: 1px solid red;
}

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

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