利用三层嵌套实现背景图自适应扩展：
我们现在要将上图用html+css实现，并且实现背景图根据内容（Browse Categories）的长度自适应宽。
要实现这个效果，
①：切出图中三个黄色框框的部分是我们要切出三张等宽图片。并将它们纵向拼接在同一张图片中。如下（尺寸为：887，路径：url(../images/side_bg.png)）：
*（PS：这里提醒大家，如果效果图中的平铺部分，是x轴方向的，则将切下的图纵向拼接；如果平铺部分是y轴方向，则将切下的图横向拼接。）
②：写HTML结构：这里用 h2/strong/span三个标签负责三层嵌套：h2负责中间的平铺背景；strong负责左边的圆角；span负责右边的圆角；
<div id="side_menu">
<!--上面的三层嵌套-->
<h2><strong><span>Browse Categories</span></strong><h2>
</div>
HTML结构
③：写CSS样式：
#side_menu h2{
/*中间的bg*/
width:210px;
height:29px;
background:url(../images/side_bg.png) repeat-x 0 -58px;
}
解析：用background的url引入我们刚刚切出的三部分拼图，由于切出的每部分的高度是29px，设置需要平铺的宽度，这里我们设置为210px。水平平铺：repeat-x
由于中间部分的图我们拼接在side_bg.png的最下面，每部分高度为29px，所以要往上移动29*2=58px的距离，所以在水平方向在效果图的左边，不需要移动，所以设置为0，垂直方向设置为 -58px。
#side_menu h2 strong{
/*左边的bg*/
display:block;
heigth:29px;
background:url(../images/side_bg.png) no-repeat;
}
解析：这是左边圆角背景的引入，不重复no-repeat
左边圆角放在side_bg.png中的最上面，不需要位置移动。
#side_menu h2 span{
/*右边的bg*/
display:block;
height:28px;
background:url(../images/side_bg.png) no-repeat right -29px;
}
解析：这是右边圆角背景的引入，不重复 no-repeat
左边圆角放在side_bg.png中的中间，所以垂直方向向上移动29px设置为 -29px
又由于这个圆角是放在效果图的右边，所以设置水平方向位置为right。
到这里，就完成了效果图的制作。如有不周到地方请指出，谢谢。