背景色和边框图像

Question

我在 test 类中的div中的背景颜色没有填充整个容器以及边框。

我的代码：

<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，我认为，我们必须做到这一点。 / p>

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

Answer 2

#border {
    display:inline-block;

    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;
    border: 10px solid transparent;
    padding: 15px;
} </style> <div id="border"><div class="test">test</div></div>

尝试在测试类中添加边框。