html表格中的圆角轮廓偏移

Question

当我尝试对 html 表格中的每个数字进行四舍五入时，我申请了outline-offset.看起来形状不是圆形的。有没有圆形和四舍五入的方法aqua？谢谢.color {    background-color: rgb(0,255,0);    border-radius: 10px;    outline: 3px solid aqua;    outline-offset: -3px;}<table><tr><td class=color>1</td><td class=color>2</td><td class=color>3</td></tr></table>

Answer 1

您不能将outline.

table-cell样式不允许典型div或span标记可以具有的所有样式。将您的单元格数据嵌套在另一个元素中并在其上设置样式。

table {

  border: 3px solid orange;

}

td {

  padding: 0.25em;

}

.color {

  background-color: rgb(0, 255, 0);

  border-radius: 10px; /* around the border */

  border: 3px solid red; /* inside the outline, outside the padding */

  outline: 3px solid aqua; /* inside the cell, outside the offset/border */

  outline-offset: 3px; /* inside the outline, outside the border */

  padding: 0.25em; /* inside the border */

  margin: 3px; /* inside the cell, outside the outline */

}

<table>

  <tr>

    <td><div class="color">1</div></td>

    <td><div class="color">2</div></td>

    <td><div class="color">3</div></td>

  </tr>

</table>

Answer 2

要对每个数字进行四舍五入，请使用以下代码片段。

#rcorners1 {

  border-radius:85px;

  padding: 10px; 

  width: 20px;

  height: 15px;  

   background-color: rgb(0,255,0);

  

<table>

<tr>

<td class=rcorners1 id=rcorners1>1</td>

<td class=rcorners1 id=rcorners1>2</td>

<td class=rcorners1 id=rcorners1>3</td>

</tr>

</table>