css td 四角圆弧

CSS中的td四角圆弧是用来让表格的单元格更加美观和舒适的一个重要属性。当我们想要在表格单元格的四个角上添加圆弧的时候，可以通过设置边框半径的方式来轻松实现。下面是一个简单的样式演示：

table {
   border-collapse: collapse;
}
td {
   border: 1px solid #ccc;
   border-radius: 5px;
   padding: 10px;
}

上述代码中，我们先将表格的边框合并，然后对每个表格单元格设置一个1像素灰色边框和5像素的圆弧半径，即可得到一个带有圆角的表格单元格。

需要注意的是，如果我们想要设置不同的单元格的圆角半径不同的话，可以通过设置border-top-left-radius、border-top-right-radius、border-bottom-left-radius和border-bottom-right-radius四个属性来实现。

td:first-child {
   border-top-left-radius: 10px;
   border-bottom-left-radius: 10px;
}

td:last-child {
   border-top-right-radius: 10px;
   border-bottom-right-radius: 10px;
}

上述代码中，我们对第一个单元格设上左上角和左下角的圆角半径，对最后一个单元格设上右上角和右下角的圆角半径，从而得到四个圆角半径不同的表格单元格。这可以非常方便地实现一些个性化的表格设计效果。