.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代码嘛，其实很简单，这里就给大家卖个关子吧。当做思考题咯

五．再唠叨几句< /strong>

　　 如果大家在阅读过程中有什么疑惑，或发现什么错误< /strong>，甚者是错别字，都可以留言给我。我将尽快给大家回复，修正。很乐意与大家交流。 & lt;/p>

　　 一直觉得博客园永远是.net，c#，MVC之类的后台天下。有关web前端的文章不少，但含金量远远不如那些多。虽然我学的是.net方向，但前端始终是挚爱。因为博客园这里前端的资料的匮乏。所以自己一旦遇到了很多前端的问题都只能google国外的文章，或是去stack overflow（但真的很有效果，回复的速度快，集思广益，而且句句锱铢。不像国内全都是“顶”啊，“标记”之类的废话，向大家强烈推荐）。

　　前端的冷落是不是真的因为前端是开源，比如html代码，只要把想要网站的图片和样式copy一下改一改就是了。毫无技术可言？还是JavaScript和jQuery这种东西和C#、Java比起来真的简单很多 ？呵，希望有兴趣的朋友能和我留言交流交流。

原文地址：http://www.cnblogs.com/hh54188/archive/2011/01/12 /1929061.html