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

不确定什么有效，但使用更大尺寸的图像可以解决它。

请注意，通常用于 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>

Answer 2

不确定这是否是您要查找的内容。您需要将 box-sizing:border-box; 添加到您的 .item class。

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

希望这对您有所帮助:)

Answer 3

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

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

来自W3C Spec on border-image-slice：

The regions given by the ‘border-image-slice’ values may overlap. However if the sum of the right and left widths is equal to or greater than the width of the image, the images for the top and bottom edge and the middle part are empty, which has the same effect as if a nonempty transparent image had been specified for those parts. Analogously for the top and bottom values.

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

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

Answer 4

这里的核心问题是您的源图像没有正确创建！在 border-image 规则中使用任何纯图像通常不会产生预期的效果。

一个人必须提前准备边框图片，这样就可以提供规范要求的9个区域。这是一个很好的视觉示例（取自 MDN）：

鉴于此 90x90 像素的源图像（即每颗钻石为 30x30 像素）...

...并应用以下 width 和 slice 规则...

border-width: 30px;
border-image-slice: 30;

...我们得到这个结果：

您可以看到源图像如何分割的完整细节here，但要点是您必须先正确设置源图像。

CSS border-image: 只用指定的背景图片填充边角。为什么？

CSS border-image: Only the corners filled with the specified background-image. Why?

html

css

border

border-image