在网页中实现圆角表格

首先是准备一个圆角图片，如下：

圆角图片

页面中的div代码：
<DIV class="rcborder">
 <DIV class=rct>
<DIV class="l tl1"></DIV>
<DIV class="r tr1"></DIV></DIV>
 <div class="content"></div>
<DIV class=rcb>
<DIV class="l bl1"></DIV>
<DIV class="r br1"></DIV></DIV>
</DIV>

关键css代码：

复制代码  
0 1 .rcborder
02 { BORDER-RIGHT: #ccc 1px solid; BORDER-TOP: #ccc 1px solid; BACKGROUND: #fff; MARGIN-BOTTOM: 10px; BORDER-LEFT: #ccc 1px solid; BORDER-BOTTOM: #ccc 1px solid}
03 .rcb {
04     CLEAR: both; HEIGHT: 5px
05 }
06 .rct .l {
07     FONT-SIZE: 1px; BACKGROUND-IMAGE: url(http://www.cn-web.com/uploads/090423/1_000017_1.gif); OVERFLOW: hidden; WIDTH: 5px; POSITION: relative; HEIGHT: 5px; LEFT: -1px; FLOAT: left; TOP: -1px
08 }
09 .rct .r {
10     FONT-SIZE: 1px; BACKGROUND-IMAGE: url(http://www.cn-web.com/uploads/090423/1_000017_1.gif); OVERFLOW: hidden; WIDTH: 5px; POSITION: relative; HEIGHT: 5px; RIGHT: -1px; FLOAT: right; TOP: -1px
11 }
12 .rcb .l {
13     FONT-SIZE: 1px; BACKGROUND-IMAGE: url(http://www.cn-web.com/uploads/090423/1_000017_1.gif); OVERFLOW: hidden; WIDTH: 5px; POSITION: relative; HEIGHT: 5px; LEFT: -1px; FLOAT: left; TOP: 1px
14 }
15 .rcb .r {
16     FONT-SIZE: 1px; BACKGROUND-IMAGE: url(http://www.cn-web.com/uploads/090423/1_000017_1.gif); OVERFLOW: hidden; WIDTH: 5px; POSITION: relative; HEIGHT: 5px; RIGHT: -1px; FLOAT: right; TOP: 1px
17 }
18
19 .tl1 {
20     BACKGROUND-POSITION: left top
21 }
22 .tr1 {
23     BACKGROUND-POSITION: right top
24 }
25 .bl1 {
26     BACKGROUND-POSITION: left bottom
27 }
28 .br1 {
29     BACKGROUND-POSITION: right bottom
30 }

转载于:https://www.cnblogs.com/guoguo11/archive/2009/06/04/1496173.html