表格单元格的内边框半径

Question

我正在尝试使用 HTML 表格和一些 CSS 创建相框。 我想为它添加一个内部边框半径，但我找不到为“边缘”（“正常边框”和“带半径的边框”之间的空格）着色的方法。

这是fiddle that showcases my problem。目标是对中心单元格的边缘进行着色，而不对其进行着色（它必须是透明的以显示下面的内容，即示例中的表格背景颜色）。

table {
  border-spacing: 0;
  background-color: aqua;
}
td {
    border: solid 1px red;
    padding: 50px;
    background-color: red;
}
td.middle {
  border-radius: 50px;
  border: 1px solid green;
  background-color: transparent;
}
tr:first-child td { border-top-style: solid; }
tr td:first-child { border-left-style: solid; }

<table>
  <tr>
    <td>1.1</td>
    <td>1.2</td>
    <td>1.3</td>
  </tr>
  <tr>
    <td>2.1</td>
    <td class="middle">2.2</td>
    <td>2.3</td>
  </tr>
  <tr>
    <td>3.1</td>
    <td>3.2</td>
    <td>3.3</td>
  </tr>
</table>

Answer 1

您需要在 td 中考虑一个新元素
如果有图像，您的 div 中将不需要 span

table {
  border-spacing: 0;
  background-color: aqua;
}
td {
    border: solid 1px red;
    padding: 50px;
    background-color: red;
}

td.middle {
  padding: 0px;
}
#center_frame{
  width: 100px;
  height: 100px;
  margin: auto;
  border-radius: 50px;
  border: 1px solid green;
      border: solid 1px red;
    background-color: lightblue;
    text-align: center;
}

#center_frame span {
  line-height: 100px;
}
tr:first-child td { border-top-style: solid; }
tr td:first-child { border-left-style: solid; }

<table>
  <tr>
    <td>1.1</td>
    <td>1.2</td>
    <td>1.3</td>
  </tr>
  <tr>
    <td>2.1</td>
    <td class="middle">
      <div id="center_frame"><span>2.2</span></div>
    </td>
    <td>2.3</td>
  </tr>
  <tr>
    <td>3.1</td>
    <td>3.2</td>
    <td>3.3</td>
  </tr>
</table>

Answer 2

为此使用radial-gradient

table {
  border-spacing: 0;
  background-color: aqua;
}

td {
  border: solid 1px red;
  padding: 50px;
  background-color: red;
}

td.middle {
  background:radial-gradient(farthest-side,transparent 99%,red 100%);
}

tr:first-child td {
  border-top-style: solid;
}

tr td:first-child {
  border-left-style: solid;
}

<table>
  <tr>
    <td>1.1</td>
    <td>1.2</td>
    <td>1.3</td>
  </tr>
  <tr>
    <td>2.1</td>
    <td class="middle">2.2</td>
    <td>2.3</td>
  </tr>
  <tr>
    <td>3.1</td>
    <td>3.2</td>
    <td>3.3</td>
  </tr>
</table>

对于自定义半径，您需要 4 个渐变：

table {
  border-spacing: 0;
  background-color: aqua;
}

td {
  border: solid 1px red;
  padding: 50px;
  background-color: red;
}

td.middle {
  background:
    radial-gradient(farthest-side at bottom left, transparent 98%,red 100%) top    right,
    radial-gradient(farthest-side at bottom right,transparent 98%,red 100%) top    left,
    radial-gradient(farthest-side at top    left, transparent 98%,red 100%) bottom right,
    radial-gradient(farthest-side at top    right,transparent 98%,red 100%) bottom left;
  background-size:25% 25%; /* adjust this to control the radius (from 0% to 50% or pixel value)  */
  background-repeat:no-repeat;
}

tr:first-child td {
  border-top-style: solid;
}

tr td:first-child {
  border-left-style: solid;
}

<table>
  <tr>
    <td>1.1</td>
    <td>1.2</td>
    <td>1.3</td>
  </tr>
  <tr>
    <td>2.1</td>
    <td class="middle">2.2</td>
    <td>2.3</td>
  </tr>
  <tr>
    <td>3.1</td>
    <td>3.2</td>
    <td>3.3</td>
  </tr>
</table>