1. 概念：
1.1 為了使各種特殊形狀的背景能夠自適應元素中文本內容的多少，出現了CSS滑動門技術。
1.2 使各種特殊形狀的背景能夠自由拉伸滑動，以適應元素內部的文本內容，可用性更強。
1.3 最常見於各種導航欄的滑動門。
2. 原理：
2.1 利用CSS精靈Sprite（主要是背景位置position）和盒子padding撐開寬度, 以便能適應不同字數的導航欄。
2.2 原背景圖--> 切開左邊 --> 剩下的右邊隨着文字的增多從左往右滑動(這也是文字增長的方向)
3. 具體做法：
經典布局：
<li>
<a href="#">
<span>導航欄內容</span>
</a>
</li>
3.1 a 設置背景左側，padding撐開合適寬度。
3.2 span設置背景右側， padding撐開合適寬度，剩下由文字繼續撐開寬度。（文字增加的方向是從左到右）
3.3 之所以a包含span就是因為 整個導航都是可以點擊的。
4. 例子1，自己實現微信官網導航欄效果
to.png
ao.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
background: url(images/wx.jpg) repeat-x;
}
.nav li {
float: left;
list-style: none;
}
.nav a {
/*1. a 左邊放 左圓角 但是文字需要往右走 15px*/
height: 33px;
line-height: 33px;
color: #fff;
text-decoration: none;
background: url(images/to.png) no-repeat left;
display: inline-block;
padding-left: 15px;
}
.nav span {
/* 2. span 右邊放右圓角 但是文字需要往左走 15px，*/
background: url(images/to.png) no-repeat right;
display: inline-block;
height: 33px;
padding-right: 15px;
}
/* 凹下去， 第一個為左邊，第二個為右邊*/
.nav a:hover,
.nav a:hover span {
background-image: url(images/ao.png);
}
</style>
</head>
<body>
<ul class="nav">
<li>
<a href="#">
<span>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>
</a>
</li>
<li>
<a href="#">
<span>第二個頁面</span>
</a>
</li>
<li>
<a href="#">
<span>第三個頁面</span>
</a>
</li>
</ul>
</body>
</html>
微信導航欄有特殊形狀的背景：有凸起和凹下去的感覺。
微信導航欄使用滑動門技術自適應文字，使很長的文字都能有相同的背景(其實是有限制的，取決於背景圖片的右側長度)