11.4 “5图形”二维滑动门经典圆角框

11.3节介绍的不固定宽度的圆角框制作方法只适用于单色的圆角框，对于带有复杂边框的圆角框就不适用了。

另外，还需要考虑一个问题，用11.3节介绍的方法制作的圆角框，尽管可以适应不同宽度，但是它里面的正文段落也承担了设置圆角框布局的任务。也就是说，圆角框中的正文并不是独立的，正文内容不能自由地设置样式。这对于通用型的网页来说，局限性很大；例如，如果较为复杂的页面，每个圆角框用于放置不同的栏目，希望达到的目标应该是可以在每个圆角框中放置任何内容，并且可以对这些内容设置样式，还能保证圆角框本身显示正确。简单地说，就是使圆角框的本身与内容完全分离。

这里向读者介绍一种非常经典的利用5个背景图像制作圆角框的方法。这种方法可以实现上面说的要求。

这种方法是由丹麦的设计师Staren Madsen，于2003年12月发表在著名的Web设计与开发电子杂志“A List Apart”的第165期上。

A List Apart的网址是http://www,alistapart.com，Soren Madsen本人的网站网址是http://www.picment.com。

一、准备图像

① 首先在Phoioshop或者Fireworks中绘制一个大约800×600的圆角矩形。

② 在Photoshop或者Fireworks中进行切片，一共产生5个图像文件，如图1所示。

left-bottom

left-top
 

right
 

right-bottom
 

right-top
 

图1 最终产生的5个图像文件

二、搭建HTML结构

接下来搭建HTML整体结构，代码如下。代码中临时设置了一些实线边框，用来确认各个盒子的位置和大小，以便进行分析，后面会把这些边框的属性去掉。该文件位于网页学习网CSS教程资源“第11章\03\step-1.htm”。

在上述代码中，定义了一个div容器，里面有一个标题和两个div，这两个div中，前者为内容主体，后者为页脚。主体中有两段文本，页脚中有一段文本。整个div设置为浏览器宽度的90%，并且给每个元素设置边框，这是为了先看清楚整体的结构。

三、放置背景图像

现在的任务就是把前面制作的5个图片分别放置到5个元素的背景中。先不考虑更多细节，仅把它们放进去即可，相关代码如下。该文件位于网页学习网CSS教程资源中“第11章\03\step-2.htm”。

这时效果基本圆角框已经构成了。但是还有两个问题，第一是文字没有放到圆角框内部，第二是右侧的边框有两个裂缝。下面就来分析并解决这个问题。

四、设置样式并修复缺口

修改文字的位置可以通过设置margin和padding来解决。这两个裂缝产生的原因是什么呢？

它是由p标记产生的。在默认情况下，每个由p标记产生的段落在第一行的上面和最后一行的下面都会有一个自动设置的margin，这个部分会盖住边框。解决办法有两个。

一种方法是重新设置放入到这个圊角框的中的p段落样式。实际上前面的例子中也是这样做的，但是从更高的要求来说，我们的目的是使圆角框的结构和它的CSS样式可以和内容完全分离开，而正文的p标记是输入内容范畴，不属于圆角框本身，也就是最好不需要对置人圆角框的p进行任何与圆角框相关的设置。从设计的角度来说，这样做更加优雅。因此，前面设置的5个背景图片都没有挂在正文的p标记上，也是出于同样豹原因。本章前面的所有例子都没有做到的一点。

另外一种方法是不需要对p进行设置。在这种情况下，又该怎么解决呢？其实方法也很简单，只需将margin设置为负值，即向上提高裂缝的高度，就可以盖住这个裂缝，理论上提高1行文字的行高就可以了，但是Soren Madsen经过多次尝试后，发现如果仅提高1个行高的高度，在CSS支持得较为完善的浏览器中显示是没有问鼯的，但是对于IE浏览器，再多提高一点更合适。例如在这个例子中，行高设定的是文字高度的1.5倍，把上margin设置为-2em，就可以得到完美的效果。

请参考下面的代码，特别注意粗体字的7行代码。该文件位于网页学习网CSS教程资源中“第11章\03\step-3.htm”。

这时显示效果如图2所示，圆角框的宽度是浏览器窗口宽度的90%，可以随浏览器窗口变化。

图2 设置完成以后的效果

通过上面的介绍可以了解到，制作圆角框的技术是很相似的，都是通过使用若干个背景图片来实现的。各种方法的区别就在于如何分配各个图像所在的元素。读者在互联网上可以搜索到大量的不同方案。