анимированная граница на div

Question

Я попробовал следующий код, чтобы получить анимированную границу для div, но я не могу получить его слева и справа. Вот мой код

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

вот скрипка http://jsfiddle.net/ahvSR/30/
Спасибо
Редактировать

Хотя решение @Mhhalis Bagos хорошее. Но я не заинтересован в div обертки, я хочу кое-что на test div или border-image

Новое редактирование

Я сделал это, используя border-image, теперь мое изображение размером 4х4 пикселя, прежде чем оно было 8х8 пикселей. Скрипка здесь http://jsfiddle.net/5rHCa/

Но, пожалуйста, кто-нибудь может подробно объяснить, почему он не работает с 8x8 пикселей.

Окончательное редактирование Это может быть сделано и через 8x8 пикселей, но ни один пользователь стека не получил ошибку в моей скрипке. Посмотрите мой ответ.

Другое окончательное редактирование

Скрипт, который я выложил с использованием 4x4 и 8x8 http://jsfiddle.net/5rHCa/ и http://jsfiddle.net/LzS7b/, не работает в Firefox 3.6. У кого-нибудь есть идеи, почему они не работают в Firefox, а работают в Chrome. 1039 *

Answer 1

Рассмотрим родительский div, который имеет анимацию в качестве фона и отступы, которые вы хотели бы иметь толщину границы, то есть:

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

Для кросс-браузерной совместимости. Образец отлично работает на firefox

Answer 2

Используйте разные AnimGif с прозрачностью в центре;

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

Answer 3

Поскольку вы используете CSS3, вы можете попробовать этот метод http://jsfiddle.net/ahvSR/31/. Если вам нужны тонкие рамки, то вы можете сделать изображение тонким до нужного размера.

Answer 4

На самом деле, в течение всей первой скрипки я не использовал свойство border-width. Так что для использования свойства border-image я думаю, что border-width необходимо. Вот моя последняя скрипка с оригинальным изображением 8x8. Все те люди, которые говорили о размере изображения, были неправы, на самом деле я пропустил border-width. Спасибо

http://jsfiddle.net/LzS7b/

Answer 5

Вы уверены, что смотрите на это в Firefox?Я только что добавил:

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

И это работает на Chrome.