Question

如何使用jquery添加border-image？

我正在使用以下代码：

的jQuery（ '＃页脚区域'）。CSS（ '边界图像'， 'url（/sites/all/resources/test.gif)30 30 round'）;

而且，它不起作用..

更新

呈现HTML

<div id="footer-area" class="clearfix" style="border-image-source: url(http://217.64.229.148/sites/all/resources/test.gif); border-image-slice: 30; border-image-width: initial; border-image-outset: initial; border-image-repeat: round; ">

有什么遗漏？

Answer 1

我认为您使用此样式遇到了浏览器兼容性问题。例如，Internet Explorer 10及更低版本不支持此CSS样式。请参阅此handy website for browser compatibility。

我个人认为你最好不要添加一个类而不是在jQuery中添加一个样式。通过这样做，您提供更好的浏览器支持。例如，旧版Firefox需要-moz-border-image，但更新版本（Firefox 15+）需要border-image。你可以这样做：

$('#footer-area').addClass('border-image');

.border-image { 
    border: 30px solid transparent;
    -moz-border-image:url("/files/4127/border.png") 30 30 repeat; /* Old firefox */
    -webkit-border-image:url("/files/4127/border.png") 30 30 repeat; /* Safari */
    -o-border-image:url("/files/4127/border.png") 30 30 repeat; /* Opera */
    border-image:url("/files/4127/border.png") 30 30 repeat;
}

要记住的另一个规则是border-image实际上需要应用此样式的边框。在我的班级（上图）中注意我有border: 30px solid transparent;。

使用jquery添加border-image？

1 个答案: