CSS - 滑动门技术
1. 概念：
1.1 为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。
1.2 使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。
1.3 最常见于各种导航栏的滑动门。
2. 原理：
2.1 利用CSS精灵Sprite（主要是背景位置position）和盒子padding撑开宽度, 以便能适应不同字数的导航栏。
2.2 原背景图--> 切开左边 --> 剩下的右边随着文字的增多从左往右滑动(这也是文字增长的方向)
3. 具体做法：
经典布局：
导航栏内容
3.1 a 设置背景左侧，padding撑开合适宽度。
3.2 span设置背景右侧， padding撑开合适宽度，剩下由文字继续撑开宽度。（文字增加的方向是从左到右）
3.3 之所以a包含span就是因为 整个导航都是可以点击的。
4. 例子1，自己实现微信官网导航栏效果
to.png
ao.png
Document
微信导航栏有特殊形状的背景：有凸起和凹下去的感觉。
微信导航栏使用滑动门技术自适应文字，使很长的文字都能有相同的背景(其实是有限制的，取决于背景图片的右侧长度)
转载于:https://www.cnblogs.com/allen2333/p/9027482.html
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！