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>

请注意，在顶部框中，设置边框并不明显，因为其颜色设置为白色，但在底部框中，白色边框被另一个细长边框包围。 / p>

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

Answer 1

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

border-box

背景延伸到边框的外边缘   （但在z排序的边界下面）。

＆＃13;

.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*/
}

＆＃13;

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

＆＃13;

使用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>

转换节点上的CSS边框

2 个答案: