我之前已经略微谈到过“滑动门”理论，但从未给出完整的示例。如果您是第一次听说，**滑动门是一种技术，它允许您在扩展网页元素内容时“从中间”扩展图形**。扩展图形并不是难点，您可以始终制作一个比您需要的更大的背景图片，并在内容增长时显示更多部分。“从中间”才是难点。
您到底是什么意思，*从中间扩展*？
我的意思是您需要图形具有**一致的角**，但仍然能够增长。最常见的用途之一就是非常流行的选项卡导航。您需要一个左上角的圆角，还需要一个右上角的圆角。您无法用一个单一的图形来实现这一点并使其可扩展，这是不可能的。
诀窍是使用两个重叠的图像。
这几乎就是全部诀窍。您需要两个元素才能实现它。例如，在菜单中，您有列表项元素和锚元素。锚元素位于顶部，因此它获得“左侧”图像。列表项位于下方，因此它获得“右侧”图像。下面的图像可以是超大的，它可以完成*扩展*的工作。
查看这些屏幕截图。第一张图片显示了“正常”尺寸的菜单，第二张图片显示了菜单如何在页面上的文本大小增加时优雅地扩展。
不错的教程，Chris
非常感谢您的分享。
很好的示例和 Photoshop 文件。谢谢。
这是一个真正不错的示例。简单易懂。
我喜欢这里的想法，也喜欢这个网站对浏览器的处理方式。
不错的教程，Chris，感谢您的示例。