-webkit-border-image:url(../image/border.png) 20/10px;
}
结果如下：
您可以狠狠地点击这里：圆角效果demo
多边框效果
使用图片如下：
圆角和边框大小都是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插件
