0

我想让这个图像在底部边框上重复。它工作正常，除了它不会向我显示全宽图像，而只会显示它的中间部分。我需要做什么才能重复完整图像？

小提琴

我的代码：

#test {
  background-color: #7ab828;
  border: 17px solid transparent;
  -webkit-border-image: url(http://i68.tinypic.com/ofdizn.png) 17 round; /* Safari 3.1-5 */
  -o-border-image: url(http://i68.tinypic.com/ofdizn.png) 17 round; /* Opera 11-12.1 */
  border-image: url(http://i68.tinypic.com/ofdizn.png) 17 round;
  border-top: none;
  border-left: none;
  border-right: none;
}
<div id="test"></div>

编辑：

我发现了如何做到这一点（至少在我的情况下，它是我想要的）。我想，由于border-image-slice将图像切成 9 个部分并且只重复中间部分，因此我编辑了我的图像，因此它显示相同的部分 3 次。现在图像被切片，中间部分仍然是完整图像。

4

1 回答 1

1

参考这个 CSS 属性：

边框图像宽度

border-image-widthCSS 属性通过定义从边框边缘向内偏移来定义边框图像的宽度。如果 border-image-width大于border-width，则边框图像超出填充（和/或内容）边缘。

于 2015-12-06T03:39:33.403 回答