圆角设计

在网页设计中把网页分成若干个部分，通常是CSS的强项。我们可以使用CSS以各种手段把页面分割成我们想要的样子。

但是在正常情况下，我们分割出来的都是矩形方框，设置边框颜色和背景颜色，产生的也都是矩形方框。有时候为了美观等种种因素，我们都需要使用到关于圆角的设计，下面我们就来讲一下如何灵活地使用圆角框。

这是CSS禅意花园作品《日与夜》，它充分的利用了圆形和曲线的配合，使得作品不会显得比较呆板。这个作品由比利时设计师Colas Schretter 设计，这个作品的网址是http://homepages.vub.ac.be/~cschrett/zengarden/dayandnight/，有兴趣的朋友可以看一下。

再如Adobe公司的首页，这样内容多的网站，结构也会比较复杂。使用圆角框可以发挥很重要的修饰和分割作用，对引导访问者的阅读起到了非常好的效果。

固定宽度圆角框

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

现在我们来制作一个圆角框，我们需要两个背景图像文件，宽度固定。这种方法只适用于制作单色圆角框。（下面图像从中切开，分为上下两部分，上面命名为“top”，下面命名为“bottom”。）

使用使用这种方法我们要先确定圆角框的颜色和它后面网页背景的颜色，然后根据这两种颜色来制作图像。

编写HTML整体结构实际上只需要一个div作为圆角框的容器。

里面加一个h1的标题，和一个或多个p段落即可。

哪个图像做哪个HTML的元素背景图像都可以，只要计算正确就好。例如把下面的圆角图像放到div背景中。

<style type=”text/css”>
#k{
Width:260px; 
Padding:0 0 18px;
Margin:0 auto;
Font:14px/1.6 arial;
Background:#0F9 url(images/bottom.gif) no-repeat left bottom;
}
</style> 

把上面的圆角图像放到h1标题的背景中：（这时我们也要理解padding、margin、background的设置方法。）

#k h1{
Margin:0;
Font-size:170%;
Background:url(images/top.gif) no-repeat ;
Padding:20px 20px 0; 
Color#FFF;
Line-height:1; 
} 

设置段落的样式，使左右两边留出一些空白：

#k p{ 
Padding:10px 20px 0;
Color:1B220F;
Margin:0;
Text-indent:2em;
} 

当然，我们可以按照自己的需要来增加正文段落的个数。

因为设置了padding上的10个像素，所以这个圆角框可以自动向下伸展，使段落之间有一定的空白。如果希望取消段落之间的空白，可以在第一个p处增加一个class来单独设置，来保持它和标题之间的距离，其它段落则可以取消这个padding。