1

我正在尝试在我创建的 div 中实现border-image 属性，我希望叶子图像（http://imageshack.us/photo/my-images/703/leafy.png/）绕过div 的边缘。

我曾尝试这样做，但无法让叶子看起来正常，而且它们似乎在角落重叠，我发现border-image 属性真的令人困惑和沮丧，希望有人能指出我正确的方向！

我正在使用的代码在这里：jsfiddle.net/MQrd6/

我想要实现的（大致）在这里：http: //imageshack.us/a/img203/1029/concept.png

我也知道 IE（像往常一样）不支持border-image 属性，有解决方法吗？使用 javascript 什么的？

非常感谢任何帮助:)

4

2 回答 2

1

你可以尝试这样的事情：http: //jsfiddle.net/MQrd6/3/

诀窍是将宽度设置border-image为border-width：

#leaf {
    width: 760px;
    vertical-align: middle;
    border-width: 22px;
    border-image: url(http://img703.imageshack.us/img703/4976/leafy.png) 22 22 round;
}

没有任何版本的 IE 支持边框图像。要在 IE 中提供支持，您可以尝试CSS3pie，这是一个简单的库，可让您在 IE6 或更高版本中使用多个 CSS3 功能。

于 2013-04-25T11:49:16.720 回答
0

有图片边框的css指令：

CSS

-moz-border-image:url("border-image.png") 25 30 10 20 repeat;
-webkit-border-image:url("border-image.png") 25 30 10 20 repeat;
border-image:url("border-image.png") 25 30 10 20 repeat;

更多信息：

http://css-tricks.com/understanding-border-image/

和

http://css-tricks.com/almanac/properties/b/border-image/

于 2013-04-25T11:11:40.567 回答