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

最新推荐文章于 2026-07-01 20:04:56 发布

转载最新推荐文章于 2026-07-01 20:04:56 发布 · 468 阅读

收录于

当前文章被以下社区和专栏收录：

本文介绍了一种使用纯CSS技术来实现圆角效果的表格设计方法。通过巧妙地利用CSS属性，无需图片即可达到美观的圆角效果。该方法适用于希望优化网页视觉效果同时保持轻量级页面加载的设计者。

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

标签