滑动门--------实现导航栏背景图自适应文字内容多少

制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，比如微信导航栏，最大的问题是里面的字数不一样多，咋办？

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

 

实现步骤：

<a>
    <span>首页</span>
</a>
<a>
    <span>公司详情</span>
</a>

a {
    padding-left: 15px;
    height: 33px;
    line-height: 33px;
    display: inline-block; 
    background: url(./img/to.png) no-repeat;
    text-decoration: none;
}
a span {
    display: inline-block;
    height: 33px;
    color: #fff;
    padding-right: 15px;
    background: url(img/to.png) no-repeat right;
}
a:hover,
a:hover span {
    background-image: url(./img/ao.png);
}

效果：