biên giới hoạt hình trên một div

Question

Tôi đã cố gắng mã sau đây để có được một biên giới hoạt hình trên một div nhưng tôi không thể có được nó trên side.here trái và bên phải là mã của tôi

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

đây là fiddle http://jsfiddle.net/ahvSR/30/
Cảm ơn
Sửa

Mặc dù @Mihalis Bagos giải pháp là tốt. Nhưng tôi không quan tâm đến việc wrapper div tôi muốn một số điều về test div hoặc border-image

New Sửa

tôi đã làm nó bằng cách sử border-image bây giờ hình ảnh của tôi là 4x4 pixel trước khi nó được 8x8 pixels.Fiddle là đây http://jsfiddle.net/5rHCa/

Nhưng hãy giải thích lý do tại sao nó không hoạt động với 8x8 pixel.

Chỉnh sửa cuối cùng Nó có thể được thực hiện thông qua 8x8 pixel nhưng không có người dùng stackoverflow gặp lỗi trong fiddle của tôi.

Một Final

Các fiddle tôi đã được thông báo bằng 4x4 và 8x8 http://jsfiddle.net/5rHCa/ và http://jsfiddle.net/LzS7b/ không làm việc trên firefox 3.6 không ai có ý tưởng tại sao những điều này không làm việc trên firefox nó đang làm việc trên chrome mặc dù.

Answer 1

Sử dụng AnimGif khác nhau với tính minh bạch trong trung tâm;

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

Answer 2

Bạn có chắc chắn đang xem nó trên Firefox không? Tôi vừa thêm:

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

Và nó hoạt động trên Chrome.

Answer 3

Xem xét một div cha mẹ, trong đó có các hình ảnh động làm nền và padding bạn muốn độ dày biên giới để được, ví dụ:

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

Đối với khả năng tương thích qua trình duyệt. Mẫu hoạt động tốt trên firefox

Answer 4

Vì bạn đang sử dụng CSS3, bạn có thể thử phương thức này http://jsfiddle.net/ahvSR/31/. Nếu bạn cần viền mỏng, bạn có thể làm cho hình ảnh của bạn mỏng đến kích thước bạn cần.

Answer 5

Thực ra tất cả thông qua tôi trong fiddle đầu tiên tôi không sử dụng thuộc tính border-width. Vì vậy, để sử dụng tài sản border-image tôi nghĩ vậy là border-width là cần thiết. Đây là fiddle cuối cùng của tôi với hình ảnh 8x8 gốc tất cả những người đã nói về kích thước hình ảnh đó là sai thực sự tôi đã mất tích border-width. Cảm ơn

http://jsfiddle.net/LzS7b/