无法将边框半径应用于 tr - CSS

在 CSS 中，我们可以使用 border-radius 属性来改变元素边框的圆角。然而，有时当我们尝试将其应用到 <tr> 元素时，会遇到无法生效的情况。

这是因为 <tr> 元素不是一个独立的元素，而是一个表格行。表格行的样式往往会受到父元素 <table> 的影响，而且其边框是由子元素 <td> 和 <th> 元素共同形成的，而非 <tr> 元素本身。

因此，如果我们想要改变表格行的边框圆角，我们需要考虑如下方法：

1. 将 border-radius 应用到 <td> 或 <th> 元素

我们可以通过将 border-radius 应用到表格单元格元素 <td> 或 <th> 上，来改变表格行的边框圆角。

td {
  border-radius: 10px;
}

2. 嵌套使用 <div> 元素

我们可以在 <td> 或 <th> 元素内部再嵌套一个 <div> 元素，并将 border-radius 应用到该元素上，从而实现改变表格行边框圆角的效果。

<table>
  <tr>
    <td>
      <div class="border-radius">
        Content
      </div>
    </td>
  </tr>
</table>

<style>
.border-radius {
  border-radius: 10px;
}
</style>

总之，想要改变表格行边框圆角，我们需要将 border-radius 应用到 <td> 或 <th> 元素或其内部嵌套的 <div> 元素上，而非直接应用到 <tr> 元素上。