CSS3 border-image详解、应用及jQuery插件（3）

猫性男孩

多边框效果
使用图片如下：

圆角和边框大小都是20，就不上CSS代码了，大同小异。终效果如下图：

您可以狠狠地点击这里：多边框效果demo

投影效果
使用素材图片如下：

剪裁宽度和边框宽度都是2 5 6 2，这里的投影我直接使用photoshop的投影样式生成的，发现用在边框投影上有一点点不足，需要手动调整，截取投影的四边，以及重复区域再拼合一下，您可以自己试试如果实现最佳的投影效果。

效果如下图：

您可以狠狠地点击这里：投影效果demo

选项卡
自适应选项卡，CSS2中实现自适应选项卡需要将背景图片制作的较长，而且需要两层标签，但是在CSS3中，图片要短，且一个标签就可以搞定。例如，这是淘宝新首页搜索选项卡的背景图片（已剪裁），，要是使用border-image，只要值么点图就可以了，

边框图片剪裁大小和边框宽度都是5 5 0；底边为0，其余都是5像素，结果效果为：

您可以狠狠地点击这里：选项卡demo

其他
还有很多其他的应用，以前我们制作渐变背景，一张背景图很少可以重复使用，而有了border-image后就不会有这样的问题了，因为其可以拉伸。我们还可以利用border-image做高光按钮，做自适应的popup对话框，等等，太多了，就不一一举例了。

五、border-image效果的jQuery插件
正如开始所讲的，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

如果您发现文章中有表述不准确或是有相关问题需要交流可以通过评论或是去 这里进行提问交流。
原创文章，转载请注明来自 张鑫旭-鑫空间-鑫生活[ http://www.zhangxinxu.com