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}