接手一个老官网，导航按钮是两张背景图拼出来的。客户把「产品中心」改成「产品与解决方案」，右边圆角直接错位，露出一截白边。

这就是滑动门技术，2003 年前后流行起来的 CSS 技巧，专门解决圆角按钮随文字变长的问题。

两张图怎么拼出一个按钮

外层链接放右半边的背景图，定位到右上角，留出右内边距；里面套一个 span，放左半边图，定位左上角，留左内边距。两张图在中间重叠一段，文字变长时重叠部分被拉开，两个圆角原地不动，看起来像门往两边滑。

当年还有个细节：两张图要重叠 1 到 2 像素，不然缩放时中间会露缝。带阴影的切图必须存成 PNG-24，用 PNG-8 边缘会有锯齿。

a { background: url(right.png) no-repeat right top; padding-right: 18px; }
a span { background: url(left.png) no-repeat left top; padding-left: 18px; }

当年为什么非这么做

那会儿 IE6 占大头，border-radius 还不存在，一个元素只能挂一张背景图。想给可变宽度的按钮加圆角，只剩切片拼图这条路。标签页、导航条、提交按钮，全是这么做的。

现在用什么替代

  • 圆角直接 border-radius: 8px，阴影也交给 CSS。
  • 渐变用 linear-gradient，不用再切图。
  • 图标用 SVG 或者字体图标，颜色能跟着文字变。
  • 真需要图片边框，用 border-image 或 background-size 控制缩放。

border-radius 从 IE9 开始支持，现在主流浏览器没有兼容问题，滑动门技术在新项目里基本没有用武之地。

老项目还得改怎么办

先别动结构，确认两张切片的实际尺寸和重叠宽度，改完文案检查 padding 够不够。如果图片丢了，用 background-size 按比例缩放顶着，或者干脆换成纯色按钮加 border-radius，视觉上差不了多少。

结论：维护老站时留着它别乱改，新项目一律 CSS 圆角，这套技术可以进博物馆了。