Question

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

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

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

我想要达到的目标（大致）是：http://imageshack.us/a/img203/1029/concepto.png

另外我知道IE（像往常一样）不支持border-image属性，是否有解决方法？使用javascript还是什么？

非常感谢任何帮助：）

Answer 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版本支持border-image。要在IE中提供支持，您可以尝试CSS3pie，这是一个简单的库，允许您在IE6或更高版本中使用多个CSS3功能。

Answer 2

有图像边框的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/

正确使用边框图像

2 个答案: