如何仅使用 CSS 实现圆桌角？-css教程-PHP中文网

如何仅使用 CSS 实现圆桌角？

Patricia Arquette

发布： 2024-11-20 02:02:02

原创

398 人浏览过

How to Achieve Rounded Table Corners Using Only CSS?

仅使用 CSS 实现圆角表格角

寻求仅使用 CSS 在 HTML 表格上实现圆角的用户可能会遇到困难，无法找到保留 CSS 的解决方案表格的边框。这里有一个解决这个问题的综合方法：

CSS实现

table {
  border-collapse: separate;
  border: solid black 1px;
  border-radius: 6px;
}

td, th {
  border-left: solid black 1px;
  border-top: solid black 1px;
}

th {
  background-color: blue;
  border-top: none;
}

td:first-child, th:first-child {
  border-left: none;
}

登录后复制

说明

首先，设置边框-折叠：分离允许单元格之间出现边框。然后，border 属性定义表格的外边框。 border-radius 创建圆角。

在单元格和标题中，border-left 和 border-top 分别指定垂直和水平边框。标题具有蓝色背景以展示圆角。此外，删除了标题的上边框，以防止与表格的外边框重叠。

最后，删除第一个单元格和标题上的左边框可以消除不必要的垂直边框。这会导致所有角单元格变成圆角，同时保留表格内的垂直和水平边框。

用法示例

<table>
  <thead>
    <tr>
      <th>Blah</th>
      <th>Fwee</th>
      <th>Spoon</th>
    </tr>
  </thead>
  <tr>
    <td>Blah</td>
    <td>Fwee</td>
    <td>Spoon</td>
  </tr>
  <tr>
    <td>Blah</td>
    <td>Fwee</td>
    <td>Spoon</td>
  </tr>
</table>

登录后复制

以上是如何仅使用 CSS 实现圆桌角？的详细内容。更多信息请关注PHP中文网其他相关文章！