所以对应上图，咱们再来一个例子，就一目了然了：
回到上节的那个例子，这回我们只需要两张图片：
和
可以看出后面那种图就是左右两侧拼接而成的，这回咱们用border-image属性完成上面的同样效果，很简单，直接看CSS代码：
.border
{
background:url(“images/tool-bar/bg_b_c.png”);
background-repeat:repeat-x;
background-position:center;
-moz-background-clip: padding;
-moz-background-origin: padding;
-moz-border-image:url(“images/bg_b_l_r.png”) 0 11;
border-width:0 11px; /*为了要适应左右两个图片的宽度，且只有左右需要，上下的宽度就不需要了*/
width:180px;
height:90px; /*因为要适应图片，所以宽度改小一点*/
padding:0 30px; /*其实Padding也是可以不需要的，为了方便说明一些问题，还是保留*/
margin:0 auto;
}
还是要做几点说明。因为在这个例子中我们只需要左右侧有图片，所以切割属性只要将图片左右切割开去可以了：0 11。在上一节最后一步的重要提示中，我反复强调border-style,border-color,border-width缺一不可。但在这里只需要一个border-width就足够了！这就是它的便利之处。但在使用时要记得不同浏览器之间的差异，判断是否要使用-moz-或-webkit-或 -o-前缀。
再给大家看几个惊艳的例子：
—–>
还有小的：
——->
至于具体CSS代码嘛，其实很简单，这里就给大家卖个关子吧。当做思考题咯
五．再唠叨几句
如果大家在阅读过程中有什么疑惑，或发现什么错误，甚者是错别字，都可以留言给我。我将尽快给大家回复，修正。很乐意与大家交流。
一直觉得博客园永远是.net，c#，MVC之类的后台天下。有关web前端的文章不少，但含金量远远不如那些多。虽然我学的是.net方向，但前端始终是挚爱。因为博客园这里前端的资料的匮乏。所以自己一旦遇到了很多前端的问题都只能google国外的文章，或是去stack overflow（但真的很有效果，回复的速度快，集思广益，而且句句锱铢。不像国内全都是“顶”啊，“标记”之类的废话，向大家强烈推荐）。
