圆角修饰和分割的作用
根据对宽度的适应性分为固定的，流动的和弹性的圆角框；根据使用的背景图片个数，根据使用的颜色可以分为单背景色，和带边框的。
固定宽度圆角框
1.两背景图像法
（1）首先要确定圆角框的颜色，以及圆角框后面的网页背景的颜色，
（2）确定html的结构
<div id="rounded">
<h3>fixedasdf</h3>
<p>这里是段落的内容</p>
</div>
（3）css设置
#rounded{
font:12px/1.6 arial;
background:#cba276 url(images/bottom.gif) no-repeat left bottom;
280px;
padding:0 0 18px;
margin:0 auto;
}//下边图像
（4）#rounded h3{
background:url('images/top.gif') no-repeat;
padding:20 20 0;
font-size:170%;
color:#fff;
line-height:1;
margin:0;
}上面的圆角图像放到h3标题中
（5）设置段落的样式，使左右两端留出一些空白
#rounded p{
padding:10 20 0;
color:#1b220f;
margin:0;
text-indent:2em;
}
2.使用透明背景图
仅设置圆角外侧处的图像，把圆角图像的主体颜色变为透明色。
3.带边框的固定宽度圆角框
css的设置如下：
#rounded{
font:12px/1.6 arial;
background:url('images/middle-frame.gif') repeat-y;
280px;
padding:0;
margin:0 auto;
}
#rounded h3{
background:url('images/top-frame.gif') no-repeat;
padding:20 20 0;
font-size:170%;
color:#cba276;
margin:0;
}
#rounded p{
padding:10 20 0;
color:#1b220f;
margin:0;
text-indent:2em;
}
#rounded p .last{
padding:0 20 18;
background:url('images/bottom-fram.gif') no-repeat left bottom;
}
4.单背景图像的带边框固定宽度圆角框
边框只有一个像素 或只是一种单色，就可以使用css的边框属性来做中间段的边框。
html同前一样
css设置如下
#rounded{
font:12px/1.5 arial;
430px;
padding:0 0 14px 0;
margin:10px auto;
background:url("bg.gif") bottom left no-repeat;
}
.rounded h3{
margin:0;
padding:5 10 7 10;
background:url("bg.gif") top left no-repeat;
color:#666;
}
.rounded p{
text-indent:2em;
margin:0;
padding:2 10 3;
border:1px solid #777;
border-0 1px;
background:#fff;
}
5.不固定宽度的圆角框
需要运用滑动门技术
1.不固定宽度的圆角框的定义
可变 ：这个圆角框本身在网页上的宽度是固定的，但是在制作网页的时候，只要简单地设定该圆角框的宽度，就能产生正确的效果，而不必重新制作背景图像，只需要一套背景图像就可以完成了
流动：含义是圆角框的宽度是跟随浏览器窗口宽度的变化而变化，例如标准流方式的div的宽度就是自动横向伸展的。它的宽度随时改变
弹性：圆角框的宽度在文字大小不变的情况下，宽度不变，而文字大小发生变化的时候，宽度随之改变
可变方式：使用绝对单位 像素
流动方式：百分比或者auto来设置宽度
弹性方式：相对单位 em来设置宽度
6. 4图像单色不固定宽度圆角框
html结构：
<div id="rounded">
<h3>unfixed rounded</h3>
<p>
<span>文字内容 </span>
</p>
</div>
css设置
#rounded{
font:12px/1.6 arial;
background:#cba276 url('images/right-top.gif') no-repeat right top;
200px;
padding:0;
margin:0 auto;
}
#rounded h3{
background:url('images'/left-top.gif) no-repeat;
margin:0;
padding:20 20 0;
font-size:170%;
color:#fff;
}
#rounded p{
color:#asdfff;
margin:0;
text-indent:2em;
background:url('images/left-bottom.gif') no-repeat left bottom;
}
#rounded p span{
padding:10 20 18;
display:block;
background:url('images/right-bottom.gif') no-repeat right bottom;
}
8. 5图像二维滑动门经典圆角框
7. 4图像滑动门单色不固定宽度圆角框
#rounded{top.gif no-repeat let top }
#rounded h3{top.gif no-repeat right top}
#rounded p{bottom.gif no-repeat left bottom}
#rounded p span{bottom.gif right bottom}
将H3和span中的背景图像分别换为11.31中的两个图 把背景色设置为一种浅色
即得出效果
<div class="rounded">
<h3>article header</h3>
<div class="main">
<p>正文内容，正文内容，正文内容</p>
</div>
<div class="footer">
<p>页脚内容</p>
</div>
</div>
css设置
.rounded{
background:url(images/left-top.gif) top left no-repeat;
90；
}
.rounded h3{
background：url(images/right-top.gif) top right no-repeat;
padding:20 20 10;
margin:0;
}
.rounded .main{
background:url(images/left-bottom.gif) top right no-repeat;//如果不设置margin为负值 上下会出现裂缝
padding:10 20;
margin:-2em 0 0 0;
}
.rounded .footer{
background:url(images/left-bottom.gif) bottom left no-repeat;
}
.rounded .footer p{
background:url(images/right-bottom.gif) bottom right no-repeat;
display:block;
padding:10 20 20;
margin:-2em 0 0 0;
}
9.在整体页面中使用圆角框
上中下三个部分，使用宽度固定且居中的布局方式，中部设置
#header,#pagefooter{
margin: 0 auto;
760px;
}
#container{
position:relative;
margin:0 auto;
760px;
}
将position属性设置为relative 目的是让它里面的div可以以它为基准进行绝对定位，设置margin居中，宽度与上下两个部分相同
将容器中左边的圆角框设置为绝对定位，宽度是500px；
#wide{
position:absolute;
top:0;
left:0;
500px;
}
设置右边的窄栏 使用标准流方式即可，左边使用margin留出左边圆角框的位置
#side{
margin:0 0 0 500px;
}
html结构代码
<div id="header" class="rounded">
<h2>page header</h2>
<div class="main">
<p>文本文本文本</p>
</div>
<div class="rooter">
<p>版权信息文字</p>
</div>
</div>
<div id="container">
<div id="wide" class="rounded">
省略圆角框的内容，复制代码
</div>
<div id="side" class="rounded">
省略圆角框的内容，复制代码
</div>
<div id="pagefooter" class="rounded">
省略圆角框的内容，复制代码
</div>
</div>
四个圆角框用的都是相同的代码结构，每一个圆角框同时有一个class属性和一个id属性，class属性用于指定rounded类别的样式，id属性用于指定定位和布局的样式
10.网页换肤 （开发网站时有可能经常用到）
只需将上例中的5个图片换掉即可实现不同的换肤效果
如果手工修改来换肤，则可以不用修改样式表，直接把要使用的那种皮肤的文件夹名称改为样式表中使用的路 径即可，工作量比较小
如果是动态网站，例如博客系统，需要在服务器端记住需要那种皮肤，动态修改文件内容。
5个背景图像的经典通用圆角框的制作方法。