您的位置：首页 > Web前端 > CSS

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

2011-09-05 21:34 260 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航