滑動門技術

為了使各種特殊形狀的背景能夠自适應元素中文本内容的多少，出現了CSS滑動門技術。它從新的角度建構頁面，使各種特殊形狀的背景能夠自由拉伸滑動，以适應元素内部的文本内容，可用性更強。 最常見于各種導航欄的滑動門。

html布局如下：

<a href="#" target="_blank" rel="external nofollow" >
			<span>我的首頁</span>
		</a>
           

css樣式實作滑動門技術：

a{
			display: inline-block;
			text-decoration: none;
			margin: 30px;
			background: url(img/to.png) no-repeat;
			color: white;
			height: 33px;
			line-height: 33px;
			padding-left: 15px;
		}
		span{
			display: inline-block;
			height: 33px;
			background: url(img/to.png) no-repeat right;
			padding-right: 15px;
		}
           

效果圖：

總結：

1. a 設定 背景左側，padding撐開合适寬度。
2. span 設定背景右側， padding撐開合适寬度 剩下由文字繼續撐開寬度。
3. 之是以a包含span就是因為整個導航都是可以點選的。