转换后的节点上的 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背景不会延伸到边框。

Answer 2

Use background-clip: padding-box;

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

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