转换节点上的CSS边框

Question

我有一个HTML节点,我在其上设置了一个非常胖的边框和一个通过CSS缩放和旋转的转换.出于某种原因,在转换之后,在边界外部,节点本身颜色的非常细小的附加边界出现在外面,好像节点的背景延伸到边界下方并且边界不是很大足以覆盖背景颜色.

.transform {
  transform: scale(1, .7) rotate(45deg);
}
.container {
  width: 100px;
  height: 100px;
  background-color: chocolate;
  border: 20px solid white;
}

<div class="container">proper white border</div>
<div class="container transform">slim orange border around actual white border</div>

请注意,在顶部框中,由于其颜色设置为白色而设置边框并不明显,但在底部框中,白色边框由另一个框的颜色边框包围.

有什么东西可以防止这种情况发生吗？

Answer 1

您可以调整background-clip属性来避免这种情况。默认情况下该值设置为border-box：

边框

背景延伸到边框的外边缘（但在 z 顺序中位于边框下方）。

.transform {
  transform: scale(1, .7) rotate(45deg);
}
.container {
  width: 100px;
  height: 100px;
  background-color: chocolate;
  border: 20px solid white;
  background-clip:content-box; /*OR padding-box*/
}

<div class="container">proper white border</div>
<div class="container transform">slim orange border around actual white border</div>

或者背景不会padding-box延伸content-box到边框。