滑动门：利用背景图像的可层叠性，并允许他们在彼此之上进行滑动，以创造一些特殊的效果。
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 宽度跟着父级 高度由子级决定 */
.btn{width: 100px;background: url(img/btn.png) repeat-x; }
.btnl{background: url(img/btnL.png) no-repeat; }
.btnr{height: 31px;background: url(img/btnR.png) no-repeat right 0;}
.btn1{width: 100px; background: url(img/btn2.png) no-repeat;}
.btn2{height: 31px; background: url(img/btnR.png) no-repeat right 0;}
</style>
</head>
<body>
<!--三层嵌套 没有宽度限制-->
<div class="btn">
<div class="btnl">
<div class="btnr"> 第一个按钮 </div>
</div>
</div>
<!--二层嵌套 有宽度限制 宽度超过背景一像素宽度会产生缝隙-->
<div class="btn1">
<div class="btn2">第二个按钮</div>
</div>
</body>
</html>
