CSS3 border-image不重复

Question

在我的网站上，<div>有一个border-image。我使用www.border-image.com

生成了带有对齐的代码

HTML

 <div class="header">
 </div>

CSS

 .header {
    height: 75px;
    background: rgb(50,50,50);
    border-style: solid;
    border-width: 30px;
    -moz-border-image: url('img/border.png') 30 round;
    -webkit-border-image: url('img/border.png') 30 round;
    -o-border-image: url('img/border.png') 30 round;
    border-image: url('img/border.png') 30 round;
}

在Chrome和Safari上测试时，边框图像显示完全正常，但不会重复。

这是为什么？我偶然发现2年前的an old Github thread，这表明添加一个名为'Dummy'的javascript变量修复了这个问题。我试了一下......它没用。所以我猜这对于容易上当的人来说是一个笑话。

在相关说明中，是否可以使边框位于<div>之外？最终版本将具有白色背景，使白色border-image不可见。

奇怪的错误，有解决方案吗？感谢。

截图 边框的每个部分仅在角落处显示一次。它们不会像预期的那样重复。注意：我没有故意在边角包含边框。

还要注意边框周围的背景，不在其中。

编辑：这是我正在使用的边框图片 Link

Answer 1

你的形象是什么样的？

没有背景颜色可以放置在边框下，你需要使用插入框阴影，大尺寸而不模糊

.header {
    height: 75px;
    box-shadow:inset 0 0 0 1000px rgb(50,50,50);
    border-style: solid;
    border-width: 30px;
    border-style: solid; border-width: 15px 16px 15px 15px;
    -moz-border-image: url(http://i.imgur.com/pWUNoki.png) 15 16 15 15 repeat;
    -webkit-border-image: url(http://i.imgur.com/pWUNoki.png) 15 16 15 15 repeat;
    -o-border-image: url(http://i.imgur.com/pWUNoki.png) 15 16 15 15 repeat;
    border-image: url(http://i.imgur.com/pWUNoki.png) 15 16 15 15 fill repeat;
         } 

http://www.border-image.com/#{%22src%22%3A%22http%3A%2F%2Fi.imgur.com%2FpWUNoki.png%22%2C%22linkBorder%22%3Atrue%2C%22borderWidth%22%3A[0%2C0%2C0%2C0]%2C%22imageOffset%22%3A[15%2C15%2C15%2C15]%2C%22fill%22%3Afalse%2C%22setRepat%22%3Afalse%2C%22repeat%22%3A[%22round%22%2C%22round%22]%2C%22scaleFactor%22%3A3%2C%22setRepeat%22%3Atrue}