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:

border-box

The background extends to the outside edge of the border (but underneath the border in z-ordering).

.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>

CSS 变形节点上的边框

CSS border on transformed node

html

css

border

css-transforms