步骤三：
这步也很简单，就是把中间重复的背景的左右两端去掉，为了方便我们下一步在左右边框中插入需要的图片。注意这里的
-moz-background-origin的content属性是无效的，实际上这里的值是padding。正如在上一节的最后说道，在火狐中是没有content这个属性的。如果有朋友想要copy这段代码，记得根据浏览器版本做相应的修改，把origin的值content改为 padding，或者把盒子的padding去掉。
.border
{
background:url(“images/tool-bar/bg_b_c.png”);
background-repeat:repeat-x;
background-position:center;
-moz-background-clip: padding;
-moz-background-origin: content; /*firefox中background-origin没有content这个属性，其实现在的值是padding。在其他浏览器中是有效的*/
border-width:0 11px; /*为了要适应左右两个图片的宽度，且只有左右需要，上下的宽度就不需要了*/
border-style:dashed;
border-color:Red;
width:180px;
height:90px; /*因为要适应图片，所以宽度改小一点*/
padding:30px; /*其实Padding也是可以不需要的，为了方便说明一些问题，还是保留*/
margin:0 auto;
}
步骤四：
这一步还是很简单，插入边框的左右两张图片，并设置好position，repeat，clip等值。注意当存在多个图片时，设置值的格式，用逗号隔开。
.border
{
background:url(“images/tool-bar/bg_b_c.png”),
url(“images/tool-bar/bg_b_l.png”),
url(“images/tool-bar/bg_b_r.png”);
background-repeat:repeat-x,no-repeat,no-repeat;
background-position:center,left center, right center;
-moz-background-clip: padding,border,border;
-moz-background-origin: content,border,border;
border-width:0 11px; /*为了要适应左右两个图片的宽度，且只有左右需要，上下的宽度就不需要了*/
border-style:dashed;
border-color:Red;
width:180px;
height:90px; /*因为要适应图片，所以宽度改小一点*/
padding:30px; /*其实Padding也是可以不需要的，为了方便说明一些问题，还是保留*/
margin:0 auto;
}
重要提示！写到这一步，可以从上图看到已经快大功告成了。把左右的红色边框去掉就可以了——那么把 border-color改为none或是直接去掉这句话？不行的。如果不设置颜色的话边框就会变成黑色，因为边框有样式，而且样式还有11px宽啊，所以会用默认的黑色来填充。现在你可能又会觉得是边框样式border-style的问题，那咱们把样式去掉，把宽度保留？也不行，因为如果没有样式宽度是无效的，结果会如下图(我们可以从firebug中看到边框的宽度是0，虽然仍然保留border-width)。所以border- style,border-color,border-width缺一不可！这一点要十分注意！
