三、滑动门

 概述：

 css精灵图可以实现特殊形状的背景自由拉伸滑动，能适应不同字数的内容

### 实例预览

https://weixin.qq.com/

### 实现要点

滑动门核心技术就是利用背景属性（主要是背景位置）和盒子padding撑开宽度, 以便能适应不同字数的导航栏。

```html

滑动门实现：

        a  span

            a用来撑开左边的小括号

            span用来撑开右边的小括号

            给a设置padding-left: 让文字距离左边有点距离，美观

            给span设置padding-right 让文字距离右边有点距离，美观

            实际文字写在span里面，span的宽度由文字和内边距撑开

            a的宽度是由span撑开了