<HTML>
<HEAD>
<TITLE>纯CSS无图打造圆角Table 无图制作圆角</TITLE>
<style type="text/css">
div.RoundedCorner...{ background: #9BD1FA }
b.rtop, b.rbottom...{ display:block; background:#FFF }
b.rtop b, b.rbottom b...{ display:block; height:1px; overflow:hidden; background:#9BD1FA }
b.r1...{ margin: 0 5px}
b.r2...{ margin: 0 3px}
b.r3...{ margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4...{ margin: 0 1px; height:2px }
</style>
<HEAD>
<BODY>
<div class="RoundedCorner">
<b class="rtop"><b class="r1"></b><b class="r2"></b>
<b class="r3"></b><b class="r4"></b></b>
<table style="width:500px;height:100px;">
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>
<b class="rbottom"><b class="r4"></b><b class="r3"></b>
<b class="r2"></b><b class="r1"></b></b>
</div>
</BODY>
</HTML>
<HEAD>
<TITLE>纯CSS无图打造圆角Table 无图制作圆角</TITLE>
<style type="text/css">
div.RoundedCorner...{ background: #9BD1FA }
b.rtop, b.rbottom...{ display:block; background:#FFF }
b.rtop b, b.rbottom b...{ display:block; height:1px; overflow:hidden; background:#9BD1FA }
b.r1...{ margin: 0 5px}
b.r2...{ margin: 0 3px}
b.r3...{ margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4...{ margin: 0 1px; height:2px }
</style>
<HEAD>
<BODY>
<div class="RoundedCorner">
<b class="rtop"><b class="r1"></b><b class="r2"></b>
<b class="r3"></b><b class="r4"></b></b>
<table style="width:500px;height:100px;">
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>
<b class="rbottom"><b class="r4"></b><b class="r3"></b>
<b class="r2"></b><b class="r1"></b></b>
</div>
</BODY>
</HTML>
127
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
