css3里有了border-image了，初次见到这个样式的时候，我不见为然，以为只是可以给border里也设置图像了而已。其实不然，border-image非常强大，它原生提供了九宫格的作用。
说到九宫格，很多人第一印象就是用四层div嵌套实现圆角。但有了border-radius之后，圆角的问题已经用不上九宫格了。但其实圆角只是常用的功能之一，另外我们常用的还有类似《无懈可击的web设计》中提到的滑动门，如果我们需要一个特殊样式的按钮，可以左右、上下方向延展的话，我们需要设计一个特别长的按钮，然后用滑动门的技术来实现这个按钮。
有了border-image之后，我们其实就可以解决滑动门的问题了。很简单，只需要按正常情况设计一个按钮即可，按钮的自适应性完全交给border-image了。具体border-image如何使用我就不详细说明了，各位可以自行搜索，总之可以用它替代滑动门。
但其实border-image也有不太好的地方。border-image中的图片只能是个单独的图片，无法使用css sprite这样的技巧，将多张图片合并成一张了。
另外，在webkit内核下，border-image可以单独使用，但在firefox下，border-image必须和border:solid;一起使用，否则看不到效果。