Html CSS边框图像：仅填充指定背景图像的角。为什么？

我想使用CSS属性“border image”：

但出于某种原因，它只填充元素的四个角：

我的代码：

.wrap{
宽度：400px；
高度：300px；
保证金：50px自动；
位置：相对位置；
}
.项目{
宽度：100px；
高度：100px；
背景颜色：浅灰色；
边框：50px实心透明；
边框图像：url(http://lorempixel.com/50/50/)50拉伸；
}

---

不确定什么是有效的，但使用较大尺寸的图像可以解决这个问题

请注意，

边框图像

中使用的图像通常是边缘带有图形的图像。并不是整个图像沿着边缘重复。图像的所有四个角都与

div

的角对齐，然后根据指定的属性调整图像的其余部分

.wrap{
宽度：400px；
高度：300px；
保证金：50px自动；
位置：相对位置；
}
.项目{
宽度：100px；
高度：100px；
背景颜色：浅灰色；
边界：50px固体；
边框图像：url(http://lorempixel.com/150/150/) 25;
}

---

不确定这是否是您要找的。您需要添加框大小：边框框到你的.item类

.wrap{
宽度：400px；
高度：300px；
保证金：50px自动；
位置：相对位置；
}
.项目{
宽度：100px；
高度：100px；
背景颜色：浅灰色；
边框：50px实心透明；
边框图像：url(http://lorempixel.com/50/50/)50拉伸；
框大小：边框框；
}

---

不，不会，因为您的图像是50x50图像，

边框图像切片也设置为50

其工作方式是UA将根据切片中指示的偏移量将图像分割为9个部分。在您的例子中，一旦您以50px的速度对图像进行切片，下面图像中标记为5、6、7和8的区域（图像是从MDN复制的）中间就没有什么可设置的了


从：

“边界图像切片”值给出的区域可能重叠。但是，如果左右宽度之和等于或大于图像的宽度，则顶部和底部边缘的图像和中间部分的图像为空，这与为这些部分指定了非空透明图像的效果相同。与顶部和底部值类似

<>你必须把边界图像切片作为小于25的中间区域来覆盖图像。

注意：虽然规范中说上边缘和下边缘图像也被认为是空的，但我不知道为什么浏览器会在所有四个角上显示图像。这可能取决于浏览器的实现。此外，即使我们将
边框图像切片指定为25，浏览器似乎也能正常工作。这与规范有点矛盾，但您至少可以找到原因：）
想告诉您这个问题，但答案不适合，所以请留下评论。问得好，问得好！这让我今天也学到了一些新东西：）@Harry非常感谢。我很高兴我的问题对你也有帮助。：）祝你有美好的一天！