bordo animato su un div

Question

Ho provato seguente codice per ottenere un bordo d'animazione su un div, ma io non sono in grado di ottenere su side.here sinistra e destra è il mio codice

<div id="test">test</div> 
#test 
{ 
position:absolute; 
width:200px; 
top:100px; 
left:50px; 
-moz-border-image:url(http://i.imgur.com/GziKo.gif) 8 0 stretch; 
} 

qui è violino http://jsfiddle.net/ahvSR/30/
Grazie
Modifica

Sebbene soluzione @Mihalis Bagos è buono. Ma io non sono interessato in wrapper div Voglio un po 'cosa su test div o border-image

Nuovo Modifica

l'ho fatto usando border-image ora la mia immagine è pixel 4x4 prima che fosse 8x8 pixels.Fiddle è qui http://jsfiddle.net/5rHCa/

Ma per favore qualcuno può spiegare a fondo perché non funzionava con 8x8 pixel.

Modifica finale Può essere fatto attraverso di pixel 8x8 anche, ma nessun utente StackOverflow ottenuto l'errore nel mio fiddle.See mia risposta.

Un altro Modifica finale

il violino ho postato utilizzando 4x4 e 8x8 http://jsfiddle.net/5rHCa/ e http://jsfiddle.net/LzS7b/ non stanno lavorando su Firefox 3.6 Qualcuno ha idea del perché questi non stanno lavorando su Firefox si sta lavorando su Chrome però.

Answer 1

Usa AnimGIF diverso con la trasparenza al centro;

http://jsfiddle.net/ahvSR/32/

Answer 2

Sei sicuro di guardarlo su Firefox? ho appena aggiunto:

-webkit-border-image:url(http://i.imgur.com/GziKo.gif) 8 0 stretch; 

e funziona su Chrome.

Answer 3

consideri un div genitore, che ha l'animazione come sfondo e l'imbottitura si vorrebbe lo spessore del bordo per essere, vale a dire:

<div id="wrapper"><div id="test">test</div></div> 
#test 
{ 
    background-color: white; 
    width:100%; 
    height:100%; 
} 
#wrapper 
{ 
    width:200px; 
    top:100px; 
    left:50px; 
    position:absolute; 
    padding:2px 0px; 
    background: url(http://i.imgur.com/GziKo.gif) top left; 
} 

Per la compatibilità cross-browser. L'esempio funziona bene su firefox

Answer 4

Poiché si utilizza CSS3, è possibile provare questo metodo http://jsfiddle.net/ahvSR/31/. Se hai bisogno di bordi sottili, puoi rendere l'immagine sottile alla dimensione che ti serve.

Answer 5

In realtà in tutto il mio primo violino non stavo usando la proprietà border-width. Quindi per usare la proprietà border-image penso che sia necessario border-width.questo è il mio ultimo violino con l'immagine originale 8x8 tutte quelle persone che stavano dicendo sulla dimensione dell'immagine era sbagliato in realtà mi mancava border-width. Grazie

http://jsfiddle.net/LzS7b/