在制作导航栏等网页元素时，常常需要为其设置特殊形状的背景，为了使各种特殊形状的背景能够自适应元素中文本的多少，即实现自由拉伸滑动，就出现了CSS滑动门技术。
微信的导航栏：
滑动门简单使用：
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>Document</title><style>a {display: inline-block;height: 33px;line-height: 33px;background: url(to.png) no-repeat;margin: 100px;padding-left: 15px;color: #fff;}a span {display: inline-block;height: 33px;/*一定注意 span 需要背景图片 右对齐*/background: url(to.png) no-repeat right top;padding-right: 15px;}a:hover {background: url(ao.png);}a:hover span {background: url(ao.png);}</style></head><body><a href="#"><span>首页</span></a><a href="#"><span>公司新闻</span></a></body></html>
这里有几个注意点：
1、因为整个导航栏都是链接所以 a 要包含 span；
2、a 是设置左侧背景（左门），span 是设置右侧背景（右门）；
3、因为我们是滑动门，要实现左右推拉，跟文字内容多少有关系，所以此处只给盒子设置背景图片的高度，不给宽度，并将 a 转换为行内块，然后为盒子设置左右 padding 避免文字压住边缘。
4、想要在鼠标悬停时改变背景图，只需要在a:hover 中更改背景图即可。
