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/
由于
的修改

虽然@Mihalis Bagos解决方案很好。但我对包装div不感兴趣我想在test div或border-image

上做一些事情

新修改

我已经使用border-image完成了现在我的图像是8x8像素之前的4x4像素。这里是http://jsfiddle.net/5rHCa/

但是请任何人都能彻底解释为什么它不适用于8x8像素。

最终修改 它也可以通过8x8像素完成，但没有stackoverflow用户在我的小提琴中弄错了。看看我的答案。

另一个最终编辑

我发布的使用4x4和8x8 http://jsfiddle.net/5rHCa/和http://jsfiddle.net/LzS7b/的小提琴不适用于firefox 3.6有没有人知道为什么这些不适用于firefox它正在使用chrome。

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

由于您使用的是CSS3，因此可以尝试使用此方法http://jsfiddle.net/ahvSR/31/。如果你需要薄边框，那么你可以使你的图像变薄到你需要的尺寸。

Answer 3

在中心使用不同的AnimGif透明度;

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

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。

div上的动画边框

5 个答案: