CSS滑动门技术

css滑动门可以使各种特殊形状的背景能够自动适应元素中文本文本内容的多少，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，常见于各种导航栏。

它的原理为：

利用CSS精灵图和盒子padding撑开宽度, 以便能适应不同程度的导航栏。

css代码：

* {
    margin: 0;
    padding: 0;
}

a {
    display: inline-block;
    height: 40px;
    background: url(images/1.png) no-repeat;
    /* 给a一个背景图片，然后给span一个背景图片，调至合适宽度，以便于文字添加自动滑动 */
    padding-left: 15px;
    color: #fff;
    text-decoration: none;
}

a span {
    display: inline-block;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: url(images/1.png) no-repeat right top;
    padding-right: 15px;
}

HTML代码：

<a href="#">
    <span>滑动门</span>
</a>
<a href="#">
    <span>滑动门1</span>
</a>
<a href="#">
    <span>滑动门2</span>
</a>
<a href="#">
    <span>滑动门3</span>
</a>
<a href="#">
    <span>滑动门4</span>
</a>

1. a是设置背景左侧内边距，因为没有给a设置宽度，需要padding-left撑开合适宽度。
2. span是设置背景右侧内边距，padding-right撑开合适宽度。
3. 因为是滑动门跟文字内容多少是有关的，需要用文字撑开盒子，所以使用行内块。