.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
中出现一些非常奇怪的不可见空间:
我该如何解决?
最佳答案
当您设置 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>
关于html - 边界的奇怪空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55935787/