Question

我无法从2x2位图正确平铺边框图像。

2x2位图（＆＃39; hr.gif＆＃39;）如下所示：

这是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

Answer 1

您是否必须尝试使用border-style属性：dotted; ？

Answer 2

尝试将顶部更改边框图像语法设置为：
each()
和数字一起玩（我无法获得你的图像所以我在W3C中使用它。）

结果：

border-image: url(hr.gif) 10 round;

DEMO

Answer 3

想出来。我不得不使用6x6位图来填补边界间隙。解决方法如下这是新的位图：

<!DOCTYPE html>
<style>
#border {
    display: table;
    border-image: url("data:image/gif;base64,R0lGODlhBgAGAKECAAAAAP///6Ag8KAg8CH5BAEKAAIALAAAAAAGAAYAAAILRGynYCIJ3EFqnQIAOw==") 2 space;
    border-width: 2px;
    border-style: solid;
}
</style>
<div id="border"><p>The quick brown fox jumps over the lazy dog</p></div>

这就是它的样子（注意边缘并不完美，因为如果宽度不均匀则会截断瓷砖;我不相信有解决方案，但这是一个可以忽略不计的问题）：{{ 3}}

border-image位图没有正确平铺

3 个答案: