CSS 如何只为表头创建圆角

在本文中，我们将介绍如何使用CSS只为表头创建圆角。通常情况下，表格的边框都是直角的，但如果我们想要为表格的表头创建圆角，可以使用一些CSS技巧来实现。

阅读更多：CSS 教程

方法一：使用border-radius属性

使用border-radius属性是最简单的方法来为表头创建圆角。这个属性可以直接应用于表格的表头单元格，使其拥有圆角效果。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    table {
      border-collapse: collapse;
    }
    th {
      background-color: #ccc;
      border-radius: 10px;
      padding: 10px;
    }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>内容1</td>
        <td>内容2</td>
        <td>内容3</td>
      </tr>
      <tr>
        <td>内容4</td>
        <td>内容5</td>
        <td>内容6</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

在上面的示例中，我们使用了border-radius属性为表头单元格添加了10像素的圆角。通过设置表头单元格的background-color属性，我们还可以为表头添加背景颜色。

方法二：使用伪元素

另一种为表头创建圆角的方法是使用伪元素。这种方法在不改变表格结构的情况下，可以为表头添加圆角效果。以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    table {
      border-collapse: collapse;
    }
    th {
      position: relative;
      padding: 10px;
    }
    th:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 20px;
      height: 100%;
      background-color: #ccc;
      border-radius: 10px 0 0 10px;
    }
    th:last-child:before {
      border-radius: 0 10px 10px 0;
    }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>内容1</td>
        <td>内容2</td>
        <td>内容3</td>
      </tr>
      <tr>
        <td>内容4</td>
        <td>内容5</td>
        <td>内容6</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

在上面的示例中，我们使用了:before伪元素为表头单元格添加了背景颜色和圆角。通过在th:before选择器中设置border-radius属性，我们可以为伪元素添加圆角。

方法三：使用背景图片

还有一种为表头创建圆角的方法是使用背景图片。我们可以为表头单元格设置一个包含圆角效果的背景图片，从而实现圆角效果。以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    table {
      border-collapse: collapse;
    }
    th {
      background-image: url("rounded-corner-bg.png");
      background-repeat: no-repeat;
      background-position: top left;
      padding: 10px;
    }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>内容1</td>
        <td>内容2</td>
        <td>内容3</td>
      </tr>
      <tr>
        <td>内容4</td>
        <td>内容5</td>
        <td>内容6</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

在上面的示例中，我们通过设置background-image属性来引入了一个包含圆角效果的背景图片。通过设置background-repeat属性和background-position属性，我们可以控制背景图片在表头单元格中的显示位置。