CSS border-image：仅用指定的背景图像填充角落。为什么？

Question

我想使用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>

我有什么错吗？

我希望这个小图像能够在垂直和水平方向上重复。

这样灰色框就被图像图案包围起来了。

非常感谢任何帮助。

Answer 1

不，不会，因为您的图像是 50x50 图像，并且border-image-slice也设置为 50。

\n\n

其工作原理border-image-slice是，UA 将根据切片中指示的偏移量将图像分割为 9 块。在您的情况下，一旦您将图像切成 50px，中间就没有任何东西可以设置下图中标记为 5、6、7 和 8 的区域（图像是从 MDN 复制的）。

\n\n

\n\n

来自W3C 规范border-image-slice：

\n\n

\n

由 \xe2\x80\x98border-image-slice\xe2\x80\x99 值给出的区域可能会重叠。但是，如果左右宽度之和等于或大于图像的宽度，则上下边缘和中间部分的图像都是空的，这与使用非空透明图像具有相同的效果。为这些零件指定。类似地，对于顶部值和底部值。

\n

\n\n

您必须将 值设置border-image-slice为小于 25，中间的区域才能被图像覆盖。

\n\n

注意：虽然规范说顶部和底部边缘图像也被视为空，但我不确定为什么浏览器在所有四个角上显示图像。这可能取决于浏览器的实现。即使我们指定border-image-slice为 25，Plus 浏览器似乎也能正常工作。这与规范略有矛盾，但你至少明白原因了:)

\n