正如开始所讲的，border-image仅Firefox3.5，chrome，Safari支持，IE这类浏览器不支持，但是并不代表他们无法实现类似的效果。例如利用canvas绘图，可以让Firefox2实现类似效果，IE下的VML语言也是支持矢量绘图，而这些就是此jQuery插件实现类似border-image效果的原理或称之为核心。
您可以狠狠地点击这里：jquery.borderImage.js（插件js）
使用方法
首先需要调用jQuery库，然后就是上面提供的js文件了。方法为borderImage，如下面的示例代码：
$('#element').borderImage('url("border.png") 30% 35% 40% 30%');对此插件我个人评价不高，原因如下：
一是IE6及以上也可以实现类似canvas效果（需js插件支持），没有必要修改头部什么再使用VML绘图；
二是兼容性欠佳，IE6下无法实现高宽大于100像素的边框的拉伸；IE8下貌似也有点问题。
因而，我不具体说，一带而过。
您可以狠狠地点击这里：border-image效果jQuery插件demo
六、总结
从本文的篇幅可以看到border-image的潜力真是很惊人，我可以感觉到这将会是CSS3中的重磅武器之一。本文大部分的精力是在讲解border-image的原理，因为我非常看好border-image的应用前景，所以尽可能细致的讲清楚border-image各个属性的含义，让即使初学者也能较好的理解border-image的含义，本文列举的几个应用可以说只是border-image最基本的些应用。如果加上些创意的思考和天马行空的想象，真不知border-image可以创造出什么奇妙的事情来。
我开始深入学习CSS3方面的东西也只是最近开始，这东西，非要投入进入，你才会感受到这玩意真是酷，太不可思议了。我现在可以想象如果CSS3的世界到来，那时候，网页将会是多么精彩的一个世界。好了，就说这些，共同进步吧。
七、参考内容
1、百度百科，九宫格：http://baike.baidu.com/view/230179.htm?fr=ala0_1_1
2、W3C官方文档： CSS Backgrounds and Borders Module Level 3
3、CSS3中文手册
4、Meet a ninja living in browsers
如果您发现文章中有表述不准确或是有相关问题需要交流可以通过评论或是去这里进行提问交流。
转载请注明来自张鑫旭
