11.2 固定宽度圆角框

因为不必考虑宽度变化带来的麻烦，所以制作宽度固定的圆角框比制作适应宽度的圆角框要简单很多。关键在于如何合理地使用背景图像。

一、两背景图像法

本例制作如图1所示的圆角框，使用两个背景图像文件，宽度固定。这种方法只适用于制作单色圆角框。本实例文件位于网页学习网CSS教程资源中“第11章\01\basic.htm”。

图1 圆角框案例效果

① 使用这种方法首先要确定圆角框的颜色，以及圆角框后面的网页背景的颜色，然后根据这两种颜色制作两个图像文件，如图2所示。例如，这里的网页背景为白色，圆角框为咖啡色，因此这两个图像的圆角外的小三角区域为白色，主体颜色为咖啡色。

        
top.gif                                                                   bottom.gif

② 编写HTML的整体结构。实际上只需要一个div作为圆角框的容器，里面有一个h3标题．以及一个或多个p段落．代码如下。lodidance.com

③ 哪个图像作为哪个HTMLrt素的背景图像都可以，只要计算正确就可以了。例如，这里把下面的圆角图像放到div的背景中，代码如下。

④ 把上面的圆角图像放置到h3标题的背景中，代码如下。lodidance.com

同样需要理解backgroud、padding和margin的设置方法。

⑤ 设置段落的样式，使左右丽端留出一些空白．代码如下。

可以看到，这个圆角框可以自动向下伸展，在段落之间有一定的空白，这是因为设置了上paddding为IO个像素。如果希望取消段落之问的空白，可以对第1个p增加一个class，单独设置，保持它和标题之间的距离，其他的段落则取消这个padding。这种方法在前面导航菜单相关的章节已经多次使用，请参考前面的案例，就可以找到具体做法的讲解。

这种两背景图像的方法还有一种变体，可以使用一个背景图像来实现，本质和两图像法相同，请参考网页学习网CSS教程资源中的文件“第11章\02\single-round.htm”，这里就不再详细介绍了。

二、使用透明背景图

这里需要进一步思考另一个问题。前面提到，在制作圆角图像的时候除了要确定圆角框本身的颜色，还要确定网页背景的颜色，使圆角外侧处的颜色与背景色融为一体。那么可不可以把圆角外侧的两个小三角形区域设置为透明色，这样不就可以显示出网页背景颜色了吗？如果这个改进能够实现的话，这个圆角框就可以适用于各种网页背景色了。然而答案是否定的，请读者先不要看答案，仔细思考一下原因。

原因在于，整个div已经设置了背景色，这种颜色就是圆角框的颜色，这时如果把圆角外侧的小三角区域设置为透明色，那么透出来的颜色不是网页的背景色，而是div的背景色，从而无法产生圆角效果。因此，这种方式是不可行的。

虽然不能使圆角外侧的颜色呈透明色，但是可以把圆角图像的主体颜色变为透明色，而圆角外侧三角形仍然为网页背景颜色。这样做的好处是，这个圆角框的颜色可以通过div的背景色任意设置，而不需要在图像中设置了，大大增加了灵活性。例如，图2所示的效果就是用这种方法将上面的圆角框换为了蓝色。本实例文件位于网页学习网CSS教程资源中“第11章\01\transparent-image.htm”。

图2 使用透明背景图像

这样做有没有副作用呢？是有的，本节为使用透明方案的效果，上节为使用不透明方案的效果。

请注意放大的边角中的效果，上节的圆角由白色和咖啡色两种颜色在图像中构成，这样两种颜色在图像处理软件中经过“消锯齿”处理，圆角显得很光滑；而本节的图像由于只有一种颜色。因此无法做“消锯齿”处理，从而使边界比较生硬。

任何事物都是有利就会有弊，我们要做的就是从全面的角度出发．选择综合最优的效果，因此需要读者在实践中根据实际情况来选择技术方案，因为技术永远是为设计思想服务的。