携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情
滑动门（sliding doors）——为按钮(buttons)而生
众说
1.制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，比如 微信导航栏，有凸起和凹下去的感觉，为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。 最常见于各种导航栏的滑动门。
微信过去的导航条
2.滑动门是一个形象的称呼，它利用CSS背景图像可层叠性，并允许在彼此之上进行滑动来创造一些特殊的动态效果。
背景图示例: 网易云音乐
片选截图
3.核心技术就是利用CSS精灵图（主要是背景位置）和盒子padding撑开宽度, 以便能适应不同字数的导航栏。
效果展示:
特制的按钮确实有 凹凸立体之感
代码实现:
总结:
1.结构:a元素包含i元素,因为整个按钮都是可以点击的。
2.a元素设置背景右侧，将a元素设置成块/行内块级元素,并设置按钮的合适宽度,加上背景图,给一个右内边距(不被i元素阻挡显示)。
3.i元素设置背景左侧(占大部分),所以将i元素设置为块级元素,默认独占一行，加上背景图，给一个左内边距且等于a元素的右边距，使得文本可以居中（text-align: center;会使文本将在width - padding-left的范围里居中）。
4.网易云音乐中的此按钮并非使用padding撑开盒子,而是更为精准化,给a元素直接设置宽度。
