纯CSS无图打造圆角Table

　　纯CSS无图打造圆角Table 无图制作圆角

　　CSS代码:

　　<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>

　　HTML代码:

　　<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>

评论总数：0 条 [ 查看全部 ] 网友评论