CSS tr 边框半径

CSS中的 border-radius 属性可以用来添加圆角边框效果。但是有时候我们仅需要设置 单独一个或部分的角 ，而不需要对整个边框都应用该效果。这时，我们可以使用 border-*-radius 属性来设置单独的角或一组角的边框半径。

border-top-left-radius

该属性用来设置左上角的边框半径，其值可为 length 或百分数，还可为多个值，用 / 分隔。当有多个值时，第一个值表示水平方向的半径，第二个值表示垂直方向的半径，如果没有第二个值，则使用第一个值。

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

border-top-right-radius

该属性用来设置右上角的边框半径，其值可为 length 或百分数，还可为多个值，用 / 分隔。当有多个值时，第一个值表示水平方向的半径，第二个值表示垂直方向的半径，如果没有第二个值，则使用第一个值。

table tr:first-child td:last-child {
  border-top-right-radius: 10px;
}

border-bottom-right-radius

该属性用来设置右下角的边框半径，其值可为 length 或百分数，还可为多个值，用 / 分隔。当有多个值时，第一个值表示水平方向的半径，第二个值表示垂直方向的半径，如果没有第二个值，则使用第一个值。

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

border-bottom-left-radius

该属性用来设置左下角的边框半径，其值可为 length 或百分数，还可为多个值，用 / 分隔。当有多个值时，第一个值表示水平方向的半径，第二个值表示垂直方向的半径，如果没有第二个值，则使用第一个值。

table tr:last-child td:first-child {
  border-bottom-left-radius: 10px;
}

以上就是关于CSS中 border-*-radius 属性的介绍。如果你想要更加具体的使用方法和实例，可以参考 MDN文档 。