需要删除背景和边框之间的神秘填充

Question

需要帮助消除边框和背景之间的神秘填充。在预览中，它看起来不错，但导出时框架内有奇怪的填充。 这是代码：

<div class="p-2" style="width:100%; max-width: 400px; border: 26px solid transparent;
    border-image: url(https://i.imgur.com/RtR8M9i.png) 52 stretch;
    border-image-slice: 35 fill;
    image-rendering: pixelated;">
    <div class="card border-0 rounded-0 py-10 px-10" style="background:#dbaa41; color:#3e2a14;">

        <p dir="ltr">┏━───────────────╮</p>

        <p dir="ltr">┃➥ Text goes here</p>

        <p dir="ltr">┗━───────────────╯</p>
    </div>
</div>

我尝试将边框中的填充设置为0，class =“no-margin”，更改fill：和background.color：，但没有任何效果。我还将分享它在预览中的外观以及它如何导出为 预览效果如何 如何保存/导出

Answer 1

请检查

border-image

属性是否正确应用，没有任何额外空间。

<div class="p-0" style="width:100%; max-width: 400px; border: 26px solid transparent;
    border-image: url(https://i.imgur.com/RtR8M9i.png) 52 stretch;
    border-image-slice: 35 fill;
    image-rendering: pixelated;">
    <div class="card border-0 rounded-0 p-0 m-0" style="background:#dbaa41; color:#3e2a14;">

        <p dir="ltr" style="margin: 0; padding: 0;">┏━───────────────╮</p>

        <p dir="ltr" style="margin: 0; padding: 0;">┃➥ Text goes here</p>

        <p dir="ltr" style="margin: 0; padding: 0;">┗━───────────────╯</p>
    </div>
</div>

尝试此操作并检查导出版本中的填充问题是否已解决