圆角矩形的做法
在网上搜索用CSS做圆角矩形时，无意中看到用表格叠加做出来的圆角矩形，效果还不错，收藏：
<table cellpadding=0 cellspacing=0 border=0 width=282 align=center>
<tr height=1>
<td rowspan=4 width=1></td>
<td rowspan=3 width=1></td>
<td rowspan=2 width=1></td>
<td width=2></td>
<td bgcolor=#43B5C9></td>
<td width=2></td>
<td rowspan=2 width=1></td>
<td rowspan=3 width=1></td>
<td rowspan=4 width=1></td>
</tr>
<tr height=1>
<td bgcolor=#43B5C9></td>
<td bgcolor=#43B5C9></td>
<td bgcolor=#43B5C9></td>
</tr>
<tr height=1>
<td bgcolor=#43B5C9></td>
<td colspan=3 bgcolor=#43B5C9></td>
<td bgcolor=#43B5C9></td>
</tr>
<tr height=2>
<td bgcolor=#43B5C9></td>
<td colspan=5 bgcolor=#43B5C9></td>
<td bgcolor=#43B5C9></td>
</tr>
</table>
看不懂上面的，再看下面：
<table cellpadding=0 cellspacing=0 border=0 width=282 align=center>
<tr height=1>
<td rowspan=4 width=1>a</td>
<td rowspan=3 width=1>b</td>
<td rowspan=2 width=1>c</td>
<td width=2>d</td>
<td bgcolor=#43B5C9></td>
<td width=2>1</td>
<td rowspan=2 width=1>2</td>
<td rowspan=3 width=1>3</td>
<td rowspan=4 width=1>4</td>
</tr>
<tr height=1>
<td bgcolor=#43B5C9></td>
<td bgcolor=#43B5C9></td>
<td bgcolor=#43B5C9></td>
</tr>
<tr height=1>
<td bgcolor=#43B5C9></td>
<td colspan=3 bgcolor=#43B5C9></td>
<td bgcolor=#43B5C9></td>
</tr>
<tr height=2>
<td bgcolor=#43B5C9></td>
<td colspan=5 bgcolor=#43B5C9></td>
<td bgcolor=#43B5C9></td>
</tr>
</table>
以上内容来自于http://www.phpx.com/happy/viewthread.php?tid=91241&extra=&page=1
搜到一个用CSS的，可试不成功，或许我用的图图不太好吧：来自老康的专栏
1。圆角矩形的代码段，从网上看来的，方法很巧妙，就是用5张不同的图片作背景来表示出这种效果。
2.CSS代码：
/* 后四张图片四分之一圆内部用第一张图片的颜色，外部用包含这个矩形的背景颜色 */
.rbroundbox { background: url(nt.gif) repeat; }/* 矩形内容背景图片*/
.rbtop div { background: url(tl.gif) no-repeat top left; }/* 左上角图片 */
.rbtop { background: url(tr.gif) no-repeat top right; }/* 右上角图片 */
.rbbot div { background: url(bl.gif) no-repeat bottom left; }/* 左下角图片 */
.rbbot { background: url(br.gif) no-repeat bottom right; }/* 右下角图片*/
.rbtop div, .rbtop, .rbbot div, .rbbot {
width: 100%;
height: 7px;
font-size: 1px;
}
.rbcontent { margin: 0 7px; }
.rbroundbox { width: 50%; margin: 1em auto; }
3。html代码：
<div class="rbroundbox">
<div class="rbtop"><div></div></div>
<div class="rbcontent">
<p>马英九表示，他对当局护渔的一贯态度，就是当局表现不佳，让日本欺负我们渔民，太不象话，他曾经多次表达强烈反对。他说，在野党只能呼吁，我们的态度应该是“扩大护渔、不惜一战、以战逼和”，让日本愿意上谈判桌，划出渔区做出承诺，要真的拿出办法才行，否则相同的情况会一再重演。</p>
</div><!-- /rbcontent -->
<div class="rbbot"><div></div></div>
</div><!-- /rbroundbox -->
又搜到一个：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>用CSS做的圆角矩形~！！</title>
<style>
#d1,#d3,#d4{
margin:5px 0px;
width:200px;
background-color:#eee;
}
#d1{
border:1px solid #444;
height:100px;
padding:0px 15px;
}
#d3,#d4{
margin-top:0px;
margin-bottom:0px;
border-left:1px solid #444;
border-right:1px solid #444;
}
.m{
height:100px;
width:200px;
padding:0px 15px;
position:relative;
}
#d3 .m{
margin:-4px 0px;
}
#d4 .m{
margin:-5px 0px;
}
.rt,.rb{
display:block;
width:232px;
margin-left:0px;
margin-right:0px;
}
.rt{
margin-top:5px;
}
.rb{
margin-bottom:5px;
}
.rt *,.rb *{
display:block;
height: 1px;
overflow: hidden;
background-color:#eee;
border-left:1px solid #444;
border-right:1px solid #444;
}
.r1{
margin: 0 5px;
background-color:#444;
}
.r2{
margin: 0 3px;
border-width:0px 2px;
}
.r3{
margin: 0 2px;
}
.r4{
margin: 0 1px;
height: 2px;
}
.rb1{
margin: 0 6px;
background-color:#444;
}
.rb2{
margin: 0 4px;
border-width:0px 2px;
}
.rb3{
margin: 0 3px;
}
.rb4{
margin: 0 2px;
}
.rb5{
margin: 0 1px;
height: 2px;
}
.rt1 {display:block;
width:232px;
margin-left:0px;
margin-right:0px;
}
</style>
<script>
</script>
</head>
<body>
<div id="d1">R=...</div>
<b class="rt"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b
class="r4"></b></b>
<div id="d3">
<div class="m">R=5</div>
</div>
<b class="rb"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b
class="r1"></b></b>
<b class="rt"><b class="rb1"></b><b class="rb2"></b><b class="rb3"></b><b
class="rb4"></b><b class="rb5"></b></b>
<div id="d4">
<div class="m">R=6</div>
</div>
<b class="rb"><b class="rb5"></b><b class="rb4"></b><b class="rb3"></b><b
class="rb2"></b><b class="rb1"></b></b>
</body>
</html>