jquery - 使用 jquery 添加边框图像？

Question

如何使用 jquery 添加边框图像？

我正在使用以下代码:

jQuery('#footer-area').css('border-image', '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;。