制作可以自由扩展的圆角矩形
圆角矩形有很多种写法，最常规的是将圆角矩形背景图从上到下（或者从左到友）分别切割成3部分，分别做背景，但这样的缺点是矩形只能向下自由延伸或者向右，不能同时左右上下自由延伸，另外也可以画线制作圆角矩形，但是圆角锯齿明显。
下面介绍一种新的方法
即把四个圆角图片（仅仅拐角的那一小部分）组合成一个最小的圆角矩形保存，假如命名为 round.gif，假如圆角矩形的边框是黑色(#000000)
XHTML代码如下：
<div class=” rounded”>
<span class=”top_left”></span>
<span class=”top_right”></span>
<span class=”bottom_left”></span>
<span class=”bottom_right”></span>
这里放内容，上面4个span是浮动在四个角的
</div>
CSS样式如下：
.rounded{
position:relative;
border:1px solid #000000;
width:500px;
height:350px;
}
.rounded span{
display:block;
position:absolute;
width:7px;
height:10px;
}
.top_left{
left:-1px;
top:-1px;
background:url(round.gif) top left
}
.top_right{
right:-1px;
top:-1px;
background:url(round.gif) top right;
}
. bottom _ left {
left:-1px;
bottom:-1px;
background:url(round.gif) bottom left;
}
. bottom _ right {
right:-1px;
bottom:-1px;
background:url(round.gif) bottom right;
}
只是把以前的做完，本来想多做几张成一个系列的，现在只有两张，慢慢做吧
