11.1 圆角框的作用

在网页设计中，通常需要把网页分为若干个部分，这正是CSS的强项。使用CSS可以方便地使用各种手段把页面灵活地分为多个部分。但是简单分割出来的都是矩形方枢，设置背景颜色和边框的颜色，产生的都只能是矩形的方框。而在网页中，经常会需要用到圆角的设计。因此，为了使页面中可以灵活地使用圃角框，有很多专家都研究出了非常好的方法，本章就来专门对圆角的设计进行介绍。

http://homepages.ulb.ac.be/~cschrett/zengarden/dayandnight/所示的是一个非常常见的布局形式，上面是页面的头部(header)，下面是页脚(footer)，页面分为两列。这种部局非常适合内容不是很多的网站。

再如Adobe网页中的圆角效果http://www.adobe.com/cn/，这是著名的Adobe公司的首页。这样内容非常多的网站，其结构也会相应复杂。

从上面的例子中，都可以看到圆角框发挥了很重要的修饰和分隔作用，对引导访问者的阅读起到了非常好的效果。

圆角框的具体分类也很多，制作方法也很多。例如，可以根据对宽度的适应性分为固定的、流动的和弹性的圆角框；根据使用的背景图片个数，又可以分为很多类型；根据使用的颜色情况，可以分为单背景色的还是带有边框的。

下面我们就从最简单的方法开始讲起。

点击下载第8~17章CSS教程资源 返回《CSS教程布局之道》教程列表