html - 背景颜色和边框图像

Question

我在 div 中的 test 背景颜色没有填满整个容器和边框。

我的代码:

<style>
    #border {
        display:inline-block;
        border: 10px solid transparent;
        padding: 15px;
        border-image-source: url("../images/border.png");
        border-image-repeat: round;
        border-image-slice: 30;
        border-image-width: 43px;
    }
    .test{
        color:white;
        background-color:black;
    }
</style>
<div id="border"><div class="test">test</div></div>

如何填充边框？

Answer 1

这是你想要的吗？使用 this创建适合您的图像“边框”的 clip-path，因为您的边框只是图像像素，实际上不是 border 我认为，我们必须做到这一点.

<style>
    #border {
        display:inline-block;
        border-image-source: url("https://source.unsplash.com/random/100x50");
        border-image-repeat: round;
        border-image-slice: 30;
        border-image-width: 43px;
        clip-path: polygon(20% 0, 80% 0, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
        overflow: hidden; /* added this */
    }
    .test{
        color:white;
        background-color:black;
        padding: 15px; /* moved to here */
    }
</style>
<div id="border"><div class="test">test</div></div>