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 {&nbsp; border: 3px solid orange;}td {&nbsp; padding: 0.25em;}.color {&nbsp; background-color: rgb(0, 255, 0);&nbsp; border-radius: 10px; /* around the border */&nbsp; border: 3px solid red; /* inside the outline, outside the padding */&nbsp; outline: 3px solid aqua; /* inside the cell, outside the offset/border */&nbsp; outline-offset: 3px; /* inside the outline, outside the border */&nbsp; padding: 0.25em; /* inside the border */&nbsp; margin: 3px; /* inside the cell, outside the outline */}<table>&nbsp; <tr>&nbsp; &nbsp; <td><div class="color">1</div></td>&nbsp; &nbsp; <td><div class="color">2</div></td>&nbsp; &nbsp; <td><div class="color">3</div></td>&nbsp; </tr></table>

Answer 2

要对每个数字进行四舍五入，请使用以下代码片段。#rcorners1 {&nbsp; border-radius:85px;&nbsp; padding: 10px;&nbsp;&nbsp; width: 20px;&nbsp; height: 15px;&nbsp;&nbsp;&nbsp; &nbsp;background-color: rgb(0,255,0);&nbsp;&nbsp;<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>