制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，如下图所示，即为设置了圆角背景的导航。而且每个元素的大小都是不确定的，有内容来决定元素的大小，但是每个元素的边框都是一样的。这就引入看滑动门技术。

特点：
1 实用性，能够根据导航条菜单文本长度自动调节宽度；
2 简洁性，它可以用简单背景小图来实现炫彩的导航条风格，大大减少网页载入内容。
3 适用性，可以多层套用，实现双层滑动门炫彩风格，也可以实现网页其他模块的一些特殊效果。

案例：

对于这种两端都为圆角的滑动门效果，一共需要3部分，首先把图片分为3部分：

两端采用两个div，采用两个圆角图形作为背景，或者直接img引入两张圆角图形，中间div采用平铺背景矩形。
如果有鼠标经过的效果，可以定义a标签，借助span标签，转换成行内块，实现此效果。
html

<div class="left"></div>
<div class="con">测试滑动门技术</div>
<div class="right"></div>

css

 .left{
        width:10px;
        height:100px;
        background-image:url(left.png);
        float:left;
}
.right{
       width:10px;
       height:100px;
       background-image:url(right.png);
       float:left;
}
.con{            
         height:100px;
         background-image:url(con.png);
         background-repeat:repeat-x;
         float:left;
         line-height: 100px;
}