css滑动门技术

       为了使各种特殊形状的背景能够自适应元素内容的多少，出现了css滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动。以适应元素内部的文本内容，可用性更强。最常用于各种导航栏的滑动门。

      核心技术是利用css精灵技术（背景位置）和盒子padding撑开宽度。以便适应不同字数的导航栏。

<li>
	<a href="#">
		<span>导航栏内容</span>
	</a>
</li>

   其中存在三个特别注意的地方：

    （一）a标签中设置背景的左侧，padding撑开合适宽度。

    （二）span标签设置背景的右侧，padding撑开合适的宽度，剩下的文字继续撑开宽度。

    （三）之所以a包含着span就是因为整个导航栏都是可以点击的。

    下面就以一个简单的小例子来说明一下

<a href="#">
		<span>首页</span>
	</a>
	a {
		margin: 100px;
		display: inline-block;
		height: 33px;
		/* 千万不能给宽度 写死宽度是不对滴，我们要推拉门 自由缩放*/
		background: url(images/ao.png) no-repeat;
		padding-left: 15px;
		color: #fff;
		text-decoration: none;
		line-height: 33px;
	}
	a span {
		display: inline-block;
		height: 33px;
		background: url(images/ao.png) no-repeat right; 
		/* span 不能给宽度 利用padding挤开  要我要span 右边的圆角  所以 背景位置 右对齐 */
		padding-right: 15px;
	}

    在执行上面的代码后会发现，在没有文字的时候也只是一个width30px的盒子而已，当添加进去了文字之后，盒子会随着字数而自己扩张。