css - 边框图像位图未正确平铺

我在从2x2位图正确拼接边框图像时遇到麻烦。

2x2位图（'hr.gif'）如下所示：

这是html / css：

<!DOCTYPE html>
<style>
  #border {
      border: 2px solid;
      border-image: url(hr.gif) repeat;
      display: table;
  }
</style>
<div id="border"><p>The quick brown fox jumps over the lazy dog</p></div>

这是页面上边框的样子：

这就是我希望边框看起来的样子：

编辑：JSFIDDLE

最佳答案

您是否必须尝试使用border-style属性：点缀；？

关于css - 边框图像位图未正确平铺，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46816253/