Question

我正在为学校建立一个网站，其中一项要求是要有一个表格元素。我制作了一个表格元素，并将边框半径设置为25像素。事实证明，边框保留了默认半径，并且背景拐角处为角。Problem with borders image 这是我使用的代码：

table {
  width: 750px;
  text-align: center;
  border: solid darkblue 5px;
  background-color: lightblue;
  margin-bottom: 25px;
  border-collapse: collapse;
  border-radius: 25px
}

<table style="margin-bottom: 25px;">
  <h2>Five Qualities</h2>
  <tr>
    <td>Creativity</td>
    <td>We want students here to be as creative as possible when planning out designs for their projects.</td>
  </tr>
  <tr>
    <td>Inquiry</td>
    <td>We want students to ask as many meaningful questions as they can when they don't understand a subject or want to know more</td>
    </p>
    <tr>
      <td>Collaboration</td>
      <td>When working on a project, we want all students to collaborate with their partners of group members in order to make the most of their time during a project work-day.</td>
    </tr>
    <tr>
      <td>Persistence</td>
      <td>When frustrated with a project, we want students to be persistent and keep working, even though they are frustrated.</td>
    </tr>
    <tr>
      <td>Communication</td>
      <td>We want our students to communicate with their group or partners to get work done in a way that everybody agrees on.</td>
    </tr>
</table>

Answer 1

使用border-spacing:0代替border-collapse:collapse来绘制border-radius。

table {
  width: 750px;
  text-align: center;
  border: solid darkblue 5px;
  background-color: lightblue;
  margin-bottom: 25px;
  border-spacing:0;
  border-radius: 25px
}

<table style="margin-bottom: 25px;">
  <h2>Five Qualities</h2>
  <tr>
    <td>Creativity</td>
    <td>We want students here to be as creative as possible when planning out designs for their projects.</td>
  </tr>
  <tr>
    <td>Inquiry</td>
    <td>We want students to ask as many meaningful questions as they can when they don't understand a subject or want to know more</td>
    </p>
    <tr>
      <td>Collaboration</td>
      <td>When working on a project, we want all students to collaborate with their partners of group members in order to make the most of their time during a project work-day.</td>
    </tr>
    <tr>
      <td>Persistence</td>
      <td>When frustrated with a project, we want students to be persistent and keep working, even though they are frustrated.</td>
    </tr>
    <tr>
      <td>Communication</td>
      <td>We want our students to communicate with their group or partners to get work done in a way that everybody agrees on.</td>
    </tr>
</table>

Answer 2

table {
  width: 750px;
  text-align: center;
  border: solid darkblue 5px;
  background-color: lightblue;
  margin-bottom: 25px;
  border-radius: 25px
}

<table style="margin-bottom: 25px;">
  <h2>Five Qualities</h2>
  <tr>
    <td>Creativity</td>
    <td>We want students here to be as creative as possible when planning out designs for their projects.</td>
  </tr>
  <tr>
    <td>Inquiry</td>
    <td>We want students to ask as many meaningful questions as they can when they don't understand a subject or want to know more</td>
    </p>
    <tr>
      <td>Collaboration</td>
      <td>When working on a project, we want all students to collaborate with their partners of group members in order to make the most of their time during a project work-day.</td>
    </tr>
    <tr>
      <td>Persistence</td>
      <td>When frustrated with a project, we want students to be persistent and keep working, even though they are frustrated.</td>
    </tr>
    <tr>
      <td>Communication</td>
      <td>We want our students to communicate with their group or partners to get work done in a way that everybody agrees on.</td>
    </tr>
</table>

Answer 3

你可以试试这个技巧：给表格角落的所有 4 个单元格一个类，然后为每个类设置边框半径，如下所示：

.top-left-cell { border-radius: 25px 0 0 0; }

.top-right-cell { border-radius: 0 25px 0 0; }

.bottom-right-cell { border-radius: 0 0 25px 0; }

.bottom-right-cell { border-radius: 0 0 0 25px; }

桌上的边框半径

3 个答案: