一个div上的动态边框

Question

一个div上的动态边框

5

我尝试使用以下代码在一个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;
}

这里有一个fiddle http://jsfiddle.net/ahvSR/30/
谢谢
编辑

尽管Mihalis Bagos的解决方案很好，但我不想使用包装器div，我想在test div或border-image上实现一些东西。

新编辑

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

但请问有人可以彻底解释一下为什么8x8像素不起作用吗？

最终编辑 也可以通过8x8像素来完成，但没有stackoverflow用户看出我的fiddle的错误。请参见我的答案。

另一个最终编辑

我发布的使用4x4和8x8 http://jsfiddle.net/5rHCa/ 和http://jsfiddle.net/LzS7b/ 在firefox 3.6上无法工作，有人知道为什么这些在firefox上不起作用吗？在chrome上可以工作。

- Ali Nouman

5个回答

2

由于您正在使用CSS3，您可以尝试这种方法http://jsfiddle.net/ahvSR/31/。如果您需要细边框，则可以将图像缩小到所需大小。

- Vlad Stratulat

Stratulat，感谢您的关注。您的回答确实解决了问题，但我也想知道为什么在这种情况下border-image不起作用，我希望能清楚地解释为什么border-image在我的情况下不起作用。如果有人使用border-image给出答案，我会给他奖励，否则我会授予您。非常感谢。 - Ali Nouman

它确实有效http://www.css3.info/preview/border-image/。我认为可能是关于你的图片的问题。尝试将代码应用于静态的.gif或.png文件，看看它如何工作。我完全相信这与图像有关。 - Vlad Stratulat

2

使用带有中心透明度的不同AnimGif；

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

- yunzen

1

其实在我的第一个fiddle中，我没有使用border-width属性。所以为了使用border-image属性，我认为border-width是必要的。这是我的最终fiddle，带有原始的8x8图像，所有那些说关于图像大小的人都是错的，实际上我漏掉了border-width。谢谢。

http://jsfiddle.net/LzS7b/

- Ali Nouman

只有当宽度和高度是8的倍数时，这才能正常工作。尝试使用height:28px; width: 204px;。 - yunzen

@yunzen，你提供的小提琴是否适用于任何高度和宽度？ - Ali Nouman

由于你没有提供要翻译的具体内容，因此我无法为您提供翻译。请提供需要翻译的英文内容，谢谢！ - yunzen

背景不是我提供的，而是来自http://lorempixel.com。他们真的很棒！向他们致敬！ - yunzen

0

你确定你是在Firefox上查看吗？我刚刚添加了：

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

它在Chrome上运行良好。

- peduarte

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mihalis Bagos · Accepted Answer

考虑一个父级div，它的背景是动画效果，填充(padding)决定了边框的粗细，即：

<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上运行正常。