css - 添加边框半径属性会更改边框的颜色

Question

我看过之前问过的类似问题，但发现这不一样。 我想在悬停时创建行边框，并分别为行中的第一个和最后一个单元格添加了带有左右边框的 css。

我的 HTML:

<table>
  <tr><td>1111111</td><td>22222222</td><td>3333333333</td></tr>
  <tr><td>4444444</td><td>55555555</td><td>6666666666</td></tr>
  <tr><td>7777777</td><td>88888888</td><td>9999999999</td></tr>
</table>

我的CSS:

table {
  border-collapse: seperate; 
  border-spacing:0;
}
tr:hover td {
  border-top: 1px groove #E8E8E8;
  border-bottom: 1px groove #E8E8E8;
}
tr:hover td:first-child {
  border-left: 1px groove #E8E8E8;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
tr:hover td:last-child {
  border-right: 1px groove #E8E8E8;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

但是添加边框半径会使两端单元格的边框更亮。 我在 Border radius changes color 为它创建了一个 JSFiddle

我一直在使用 Chrome 55，它改变了第一个和最后一个单元格的颜色，但仅限于顶部。使用 Safari 10 会更改底部和顶部边框的颜色。

Answer 1

我不太确定，但它似乎是一些不稳定的抗锯齿，使用 1px 的凹槽使情况变得更糟。使用 2px 的凹槽或 1px 的实心似乎可以修复它，尽管它仍然在两侧倾斜了一点。这是故意的还是不想要的？