html - 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 上测试，边框图像显示完美，只是不重复。

这是为什么？我偶然发现 an old Github thread从 2 年前开始，它建议添加一个名为“Dummy”的 javascript 变量来解决这个问题。我试过了……没用。所以我猜这是给容易受骗的人开的玩笑。

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

奇怪的bug，请问有解决办法吗？谢谢。

截图 边框的每个部分只在 Angular 落显示一次。它们不会像预期的那样沿着两侧重复。注意:我没有故意在 Angular 上添加边框。

另请注意，背景是在边框周围，而不是在边框内。

编辑:这是我正在使用的边框图像 Link

Answer 1

你的形象是什么样的？

为了在边框下没有背景颜色，你需要使用一个 inset box shadow ，大尺寸并且没有模糊

.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}