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的样式。或者使用Pie。

在桌子周围生成弯曲边框的方法？

1 个答案: