彭伟国 邢立国

摘要：运用CSS滑动门技术，可以实现圆角图像宽高的自适应伸缩，根据页面元素内容多少动态自适应背景图像的宽高变化，提高了页面背景图像素材的重用率，为网页设计者带来了全新的技术设计体验。

关键词：滑动门；CSS；导航菜单；圆角矩形

中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2018）22-0204-02

网页设计中运用圆角图像最多的页面元素就是圆角导航菜单和圆角矩形框了。早期的圆角导航条设计采用较多的是表格布局技术。这种实现方法最大的弊端就是导航菜单宽度无法自适应内容的变化，且导航菜单中文本内容的变化都会导致表格布局的变化，有些变化是意想不到的。为解决网页设计中存在的这个问题，目前最好用的技术就是CSS滑动门技术。

1 CSS滑动门原理

利用CSS滑动门技术实现圆角导航菜单之前，首先需要准备一个背景图像，这个背景图像通常创建得比预期的宽高值大很多，以便能容纳大的内容量。宽高设置多大的值主要取决于圆角导航菜单内部放置最多内容时的大小。

CSS滑动门原理是指两个嵌套的HTML标签各使用一个背景图像，背景图像除两端之外互相重叠在一起，中间重叠区间的宽或高根据文字大小和内容量自适应变化；两个图像就像两扇门一样可以滑动，当嵌套的HTML标签内文字小或内容量少时，两幅图像就重叠少一些，如图1所示；相反，两幅图像就重叠多一些，如图2所示。这个重叠区域（称为doorway）由内容区域和padding两部分组成，padding属性的设置通常用于显示标签的独特性，如图1左侧的圆角[1]。……