html - 边界的奇怪空间

Question

.cardboard-window {
  color: white;
  margin: auto;
  resize: both;
  display: inline-block;
  box-sizing: border-box;
  border: 8px solid;
  border-image: url("https://sites.google.com/site/drawalbumimages/imgs/cardboard window.png");
  border-image-slice: 1 1 3 1 fill;
  border-width: 4px 4px 12px 4px;
  border-image-repeat: repeat;
  image-rendering: pixelated;
}

<div style="position:absolute; margin:0; top:100%; transform:translateY(-150%);" class="cardboard-window">
  Window stuff...
</div>

当我使用 transform:translate(...) 时，.cardboard-window 中出现一些非常奇怪的不可见空间:

我该如何解决？

Answer 1

当您设置 border image 时你把它切成薄片以满足你的需要所以我相信空间来自切片 Action 。我找不到通过修改边框来解决此问题的方法，但在您的特定情况下，您只需将 #c08f4f 的背景颜色设置为您的 div。

如果设置背景色不适合你试试这个:

.cardboard-window {
  color: white;
  margin: auto;
  resize: both;
  display: inline-block;
  box-sizing: border-box;
  border: 8px solid;
  border-image: url("https://sites.google.com/site/drawalbumimages/imgs/cardboard window.png");
  border-image-slice: 1 1 3 1 fill;
  border-width: 4px 4px 12px 4px;
  border-image-repeat: repeat;
  image-rendering: pixelated;
}
	
.message-container{
  position: absolute;
  margin: 0;
  top: 100%;
  transform: translateY(-150%);
  height: 34px;
}

<div class="message-container">
  <div class="cardboard-window">
    Window stuff...
  </div>
</div>