我想使用 CSS 属性“border-image”：https ://developer.mozilla.org/de/docs/Web/CSS/border-image
但由于某种原因，它只填充了元素的四个角：
我的代码：
.wrap {
width: 400px;
height: 300px;
margin: 50px auto;
position: relative;
}
.item {
width: 100px;
height: 100px;
background-color: lightGray;
border: 50px solid transparent;
border-image: url(http://lorempixel.com/50/50/) 50 50 50 50 stretch stretch;
}<div class="wrap">
<div class="item"></div>
</div>我错了什么？
我希望小图像可以垂直和水平重复。
这样灰色框就被图像图案包围了。
非常感谢任何帮助。
不，它不会因为您的图像是 50x50 图像并且border-image-slice也设置为 50。
工作方式border-image-slice是 UA 将根据切片中指示的偏移量将图像分成 9 块。在您的情况下，一旦您将图像切成 50 像素，中间就没有任何东西可以设置为下图中标记为 5、6、7 和 8 的区域（图像是从 MDN 复制的）。
'border-image-slice' 值给出的区域可能会重叠。但是，如果左右宽度之和等于或大于图像宽度，则上下边缘和中间部分的图像为空，这与非空透明图像的效果相同为这些部分指定。类似于顶部和底部的值。
您必须将border-image-slice中间区域设置为小于 25 的值才能被图像覆盖。
注意：虽然规范说顶部和底部边缘图像也被认为是空的，但我不确定为什么浏览器会在所有四个角上显示图像。这可能取决于浏览器的实现。即使我们将其指定border-image-slice为 25，Plus 浏览器似乎也能正常工作。这与规范略有矛盾，但您至少知道原因 :)
不确定什么有效，但使用较大尺寸的图像可以修复它。
请注意，通常使用的图像是border-image边缘带有图形的图像。并不是整个图像沿边缘重复。它是图像的所有四个角都与我们的角对齐，div然后根据指定的属性调整图像的其余部分。
.wrap {
width: 400px;
height: 300px;
margin: 50px auto;
position: relative;
}
.item {
width: 100px;
height: 100px;
background-color: lightGray;
border: 50px solid;
border-image: url(http://lorempixel.com/150/150/) 25;
}<div class="wrap">
<div class="item"></div>
</div>不确定这是否是您要寻找的东西。您需要添加box-sizing:border-box; 到你的.item类。
.wrap {
width: 400px;
height: 300px;
margin: 50px auto;
position: relative;
}
.item {
width: 100px;
height: 100px;
background-color: lightGray;
border: 50px solid transparent;
border-image: url(http://lorempixel.com/50/50/) 50 50 50 50 stretch stretch;
box-sizing:border-box;
}<div class="wrap">
<div class="item"></div>
</div>希望这可以帮助 ：）
