如何在桌子周围产生弯曲的边框？

Question

在桌子周围创建弯曲边框的最佳方法是什么？

使用border-radius属性只是在表的外部放置一个弯曲的边框。但是，单个单元格会生成双边界。

<table class="round" with="100%" height="200"> 
<tr> 
    <td>Text</td> 
</tr> 
</table> 

它的CSS定义为

.round{ 
    border: 1px solid black; 
    border-radius: 20px; 
} 

这只会产生与周围的细胞无边框圆角表格。如果我们试图通过把

.round td{ 
    border: 1px solid black; 
} 

产生细胞周围的边框然后，我们得到一个双边框。

是否有解决方法？

Answer 1

改为在角单元上放置边界半径。

.tr:first-child .td:first-child{ 
    border-top-left-radius: 20px; 
} 
.tr:first-child .td:first-child{ 
    border-top-right-radius: 20px; 
} 

.tr:last-child .td:first-child{ 
    border-bottom-left-radius: 20px; 
} 
.tr:last-child .td:first-child{ 
    border-bottom-right-radius: 20px; 
} 

根据内容的不同，您可能需要填充这些单元格。 您还需要供应商前缀，并可能为IE应用JavaScript样式。或者使用派。