添加边框半径属性会更改边框的颜色答案

【问题标题】：Adding border radius property changes color of the border添加边框半径属性会更改边框的颜色
【发布时间】：2017-01-21 07:26:12
【问题描述】：

我查看过之前提出的类似问题，但没有发现相同的问题。我想在悬停时创建行边框，并分别为行中的第一个和最后一个单元格添加左右边框的 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 会更改底部和顶部边框的颜色。

【问题讨论】：

标签： css html

【解决方案1】：

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

【讨论】：

我最终使用了solid。使用 1px 凹槽和边框半径不起作用。

【解决方案2】：

试试这个css代码

    table {
border-collapse: seperate; 
border-spacing:0;
}
tr:hover td {
  border-top: 1px groove #E8E8E8;
  border-bottom: 2px 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: 2px groove #E8E8E8;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

将右侧和底部边框宽度更改为 2 像素

【讨论】：

更改边框宽度看起来可以解决浏览器上的问题，但不能解决所有问题。