所謂的滑動門技術，就是指盒子背景能夠自動拉伸以適應不同長度的文本。即當文字增多時，背景看起來也會變長。
大多數應用于導航欄之中，如微信導航欄:
具體實現方法如下：
1、首先每一塊文本內容是由a標簽與span標簽組成
<a href="#"><span></span></a>2、a標簽只指定高度，而不指定寬度。
3、a標簽 設置好背景圖后，指定一個padding-left值，大小與左側半圓大小相同，（這樣保證左邊背景不變，中間的背景進行拉伸即可）。
4、span標簽同樣指定該背景圖片，不指定寬度，并且指定padding-right值將圖片右半部分顯示出來（這是要是定圖片位置為右）
具體代碼如下：
a {color: white;line-height: 33px;margin: 100px;display: inline-block;text-decoration: none;/* a不能給寬度 *//* */height: 33px;background: url(Images/vx.png) no-repeat;padding-left: 15px;}a span {display: inline-block;height: 33px;background: url(Images/vx.png) no-repeat right;padding-right: 15px;}span 的背景要指定為right
<a href="#"><span>一</span></a><a href="#"><span>一句</span></a><a href="#"><span>一句話</span></a><a href="#"><span>一句長長的話</span></a><a href="#"><span>一句超級超級超級超級超級超級長的話</span></a>顯示結果為
可以發現隨著span標簽中文本長度的變化將會帶動背景圖片的拉伸。
?
本文轉載于:猿2048https://www.mk2048.com/blog/blog.php?id=h1cbab&title=CSS 小結筆記之滑動門技術
方法)
