外贸购物网站的产品详细的内容都比较多，特别是涉及到产品细节的内容又细分为多外版块，这个时候我们通常会用到选项卡功能，如何让选项卡看起来更美观也是至关重要的，产品细节一般涉及到Description、Color Choice 、Size Charts 、Measurement Guides等，显然这几项的宽度是不一样的，如果让选项卡的背景为一个纯色块的话，当然很简单，但如果是一个圆角的背景图片该如何让其自适应宽度呢

一个小例子：
<style>

#tabm {height:22px; border-bottom:solid 2px #af6a33;  font-size:12px; font-weight:bold;}
#tabm ul {overflow:hidden;}
#tabm ul li {float:left;height:22px; margin-right:10px; text-align:center; line-height:22px; background:url(../images/protitbg_l.jpg) left bottom no-repeat;}
#tabm ul li span{padding:0px 15px; display:block; float:left; background:url(../images/protitbg_r.jpg) right bottom no-repeat; cursor:pointer; height:22px; line-height:22px;}

#tabm ul li.sec2 { background-position:left top; position:relative;color:#fff;}
#tabm ul li.sec2 span{background-position:right top; display:block;}

</style>

 <div id="tabm">
                  <ul>
                  <li id="tab0" onclick="secBoard(0)"><span>Notes</span></li>
         <li id="tab1" onclick="secBoard(1)"><span>Tell Friends</span></li>
         <li id="tab2" onclick="secBoard(2)"><span>Color Choice</span></li>
         <li id="tab3" onclick="secBoard(3)"><span>Size Chart</span></li>
         <li id="tab4" onclick="secBoard(4)"><span>Measurement Guides</span></li>
</ul></div>