《CSS中的滑动门技术》一文中介绍了一种经典的CSS滑动门做法，即把标签图片的尺寸做的足够大（如下图），然后将标签划分成左右两部分，靠右侧较长的图片背景来实现滑动门的效果。

在参考了《100%点击区的滑动门》后我尝试了一些新的做法。

我的切图方式是这样的：

将标签的左角、右角及中间部分放在一张图片里。目的是减少HTTP请求，还可以让整个标签同时显示出来，而不是先下载好的部分就先显示出来。

Xhtml的代码如下：
<ul>
      <li class="on"><a href="tabTest1.html"><span>首 页</span></a></li>
      <li><a href="tabTest2.html"><span>美 女</span></a></li>
      <li><a href="tabTest3.html"><span>音乐盒</span></a></li>
      <li><a href="tabTest4.html"><span>to赵雪</span></a></li>
</ul>
很遗憾我在a里套了一个span，但是我将标签分为三部分，暂时也只能用span了。

CSS代码如下：
ul{
        list-style:none;
        margin:0;
        background:url(test3.gif) repeat-x;
        width:600px;
        height:28px;
        padding:13px 0 0 20px;
}

li{
        background:url(test2.gif) 0 -56px repeat-x;
        height:28px;
        line-height:28px;
        font-size:12px;
        font-weight:bold;float:left;
}
li a{
        background:url(test2.gif) 0 0 no-repeat;
        display:block;
        color:#069;
        height:28px;
        line-height:28px;
        text-decoration:none;
        float:left;
}
li a span{
        display:block;
        float:left;
        background:url(test2.gif) right -28px no-repeat;
        padding:0 15px;
        cursor:pointer; /*倒霉的IE有BUG，这样可以强制它显示手型鼠标箭头*/
}
li a:hover{
        color:#09C;
}

li.on{
        background-image:url(test1.gif);
}
li.on a{
        background-image:url(test1.gif);
        color:#FFF;
}
li.on a span{
        background-image:url(test1.gif);
}
li.on a:hover{
        color:#FFF;
}

最终效果

更多方法还在试验中...