CSS 边框图像不显示完整图像

Question

我想在底部边框上重复这个图像。它工作得很好，只是它不会显示全幅图像，只显示中间部分。我需要做什么才能重复全幅图像？

Fiddle

我的代码：

#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次。现在图像被切片，中间部分仍然是完整的图像。

Answer 1

请参阅此CSS属性：

边界图像宽度

border-image-widthCSS属性定义边界的宽度通过定义从边界边缘向内偏移的图像。如果如果border-image-width大于border-width，则边界图像延伸到填充（和/或内容）边缘之外。