滑动门技术利用两个嵌套元素设置不同背景图，外层控制左端，内层控制右端，中间随内容伸缩，实现自适应按钮或标签页效果；典型结构为a嵌套span，分别应用左右背景图并留出内边距，使整体如滑动门般伸缩；现因css3的border-radius、linear-gradient及flexbox等技术普及，已多用于老项目兼容，新项目普遍采用纯CSS方案替代。
滑动门技术（Sliding Door Technique）是一种早期的css布局技巧，主要用于实现可伸缩的按钮或标签页效果，让背景能够根据内容长度自动调整大小。
核心原理
利用两个嵌套的元素（通常是和或
），分别设置不同的背景图像。外层控制一端的样式，内层控制另一端，中间部分随着内容增减拉伸，看起来像两扇门滑开一样，因此得名“滑动门”。
典型应用场景包括：
- 可变宽度的导航按钮
- 标签页（tab）效果
- 气泡提示框
实现方式
以一个按钮为例：
立即学习“前端免费学习笔记（深入）”；
新鲜水果网站销售模板
70
网站模板是能够具有交互性，能够包含更多活跃的元素，就有必要在网页中嵌入其它的技术。如：Javascript、VBScript、Document Object Model（DOM，文档对象模型）、Layers和 Cascading Style Sheets（CSS，层叠样式表），这里主要讲Javascript。那么Javascript是什么东西？Javascript就是适应动态网页制作的需要而诞生的
70 
html结构：
<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" class="button"><span>点击我</span></a>.button { background: url('left-bg.png') no-repeat left center; padding-left: 10px; float: left; } .button span { background: url('right-bg.png') no-repeat right center; padding-right: 10px; display: block; }这样，文字内容在中间区域，左右两端背景图固定，整体宽度随文字变化而自适应。
现代替代方案
随着css3的发展，圆角、渐变、阴影等效果可以直接用CSS实现，不再依赖切图。现在更推荐使用：
- border-radius 实现圆角按钮
- linear-gradient 创建渐变背景
- flexbox 或 grid 布局代替复杂定位
所以滑动门技术现在主要用于兼容老项目或特定视觉需求，新项目基本被纯CSS方案取代。
基本上就这些。