Sliding Doors: Take advantage of the layerability of background images and allow them to slide on top of each other to create some special effects.
Example:
<!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>