如何禁用边框颜色与单元格背景的对比？

Question

HTML 边框的默认行为似乎与单元格背景颜色不同，强加某种对比度，覆盖定义的边框颜色。我试图追踪问题以关闭此覆盖，但找不到它的来源。

下面的例子演示了这个问题：

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
  border-color: lightgray;
}

.lav {
  background-color: lavender;
}

.medBlue {
  background-color: mediumblue;
}

<body>
  <table>
    <tr class="lav">
      <th>Firstname</th>
      <th>_</th>
      <th>Lastname</th>
    </tr>
    <tr class="lav">
      <td>Peter</td>
      <td>_</td>
      <td>Griffin</td>
    </tr>
    <tr class="medBlue">
      <td>Lois</td>
      <td>_</td>
      <td>Griffin</td>
    </tr>
  </table>
</body>

正如预期的那样，前两行的边框颜色为浅灰色。但是，具有较暗背景的第三行的边框颜色被不同的颜色覆盖。

如何在这个 table 制服中设置边框颜色？

有人问了类似的问题，但我认为这个问题与透明度无关（至少，较暗单元格上的边框颜色会更暗，而不是更亮）。

编辑：这个问题似乎与缩放程度有关，这让我相信这是浏览器在边框宽度（任意？）被认为太小时做出的修正。换句话说，在 table 上放大时，颜色会更改为 as-intended。 work-around 是简单地使边框变粗，但我想避免这种情况。当使用 PhantomJS 加载此类 tables 并随后对其进行截图时，问题仍然存在，这就是我需要此代码的原因。

编辑2：根据 Mr.Lister 的评论，我检查了十六进制，并在结果相同时以为我疯了一会儿。然后我尝试了不同的屏幕（12 到 55 英寸）来检查这是否真的只是一种视错觉，但这并没有定论。效果因屏幕而异，绝对大小似乎不是根本原因。虽然我在这个阶段犹豫是否要完全消除感知，但它更可能与个人显示渲染有关（你该死的孩子和你的智能色彩调整屏幕！）。在任何情况下，对于所有密集用途来说，颜色确实是相同的，这意味着不能通过调整任何 CSS 声明来固定对比度。第一个答案，建议简单地使颜色变暗，似乎是可行的方法。

Answer 1

你唯一能做的就是增加边框颜色的暗度来取悦眼睛。 .medBlue td {border-color: gray; }.

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
  border-color: lightgray;
}

.lav {
  background-color: lavender;
}

.medBlue {
  background-color: mediumblue;
}
.medBlue td {
  border-color: gray;
  }

<body>
  <table>
    <tr class="lav">
      <th>Firstname</th>
      <th>_</th>
      <th>Lastname</th>
    </tr>
    <tr class="lav">
      <td>Peter</td>
      <td>_</td>
      <td>Griffin</td>
    </tr>
    <tr class="medBlue">
      <td>Lois</td>
      <td>_</td>
      <td>Griffin</td>
    </tr>
  </table>
</body>

如何禁用边框颜色与单元格背景的对比？

How to disable border color contrast with cell background?

html

css

border

border-color