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

最新推荐文章于 2025-08-17 15:24:04 发布

峰北红

最新推荐文章于 2025-08-17 15:24:04 发布

阅读量434

点赞数

文章标签： table css class

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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