Question

我正在为表格的每一行设置一个边框底部，没有其他样式：

#myTable tr {border-bottom: 1px solid rgba(220,220,220, 1);}

这很完美。现在我想通过以下代码替换上面的代码来减少不透明度：

#myTable tr {border-bottom: 1px solid rgba(40,40,40, 0.2);

结果是最后一个tr的边框底部比其他边框轻，这是不正常的。它看起来像边界相互交错，但它是不可能的，因为我没有设置任何边界顶部。我甚至试着明确地将border-top设置为0px solid white和其他组合，但仍然是相同的行为。

任何人都可以解释为什么它的表现如此吗？ rgba（）中的不透明度是否由边框处理？

编辑：我只在Chrome中测试了这个，而不是IE或FF

Answer 1

你的表继承了边框值，并且应用了两倍的值，一个超过了另一个

您可以在悬停时使用更明显的值来检查：

table {
  border-collapse: collapse;
}

tr td {
  width: 200px;
  border-bottom: solid 20px rgba(255,0,0,0.25);
}

table  {
  border-bottom: solid 20px rgba(255,0,0,0.95);
}

table:hover {
  border-bottom: solid 21px rgba(255,0,0,0.95);
  
}

<table>
<tr>
<td>data</td>
</tr>
<tr>
<td>data</td>
</tr>
<tr>
<td>data</td>
</tr>
</table>

我能找到的最佳解决方案是创建一个曾经翻倍的边框，获得相同的外观..（不容易）

table {
  border-collapse: collapse;
}
td {
  width: 200px;
}
tr:nth-last-child(n+2) {
  border-bottom: solid 20px rgba(255, 0, 0, 0.25);
}
table {
  border-bottom: solid 21px rgba(255, 0, 0, 0.45);
}

<table>
  <tr>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
  </tr>
</table>

来自w3c documentation

的

17.6.2.1边界冲突解决

在折叠边框模型中，每个单元格的每个边缘都有边框   可以由各种元素上的border属性指定   在那边（单元格，行，行组，列，列组，   和桌子本身），这些边界的宽度，风格和   颜色。经验法则是每个边缘最“引人注目”   选择边框样式，除了任何样式的出现   'hidden'无条件地关闭边界。

以下规则确定在a的情况下哪种边框样式“获胜”   冲突：

'hidden'的'border-style'边框优先于所有边框   其他相互冲突的边界。具有此值的任何边界都会抑制所有   在这个位置的边界。风格为“无”的边框有   最低优先级。仅当所有元素的边界属性   在这个边缘的会议是'none'将省略边界（但注意   'none'是边框样式的默认值。）如果没有   样式是“隐藏的”，其中至少有一个不是“无”   狭窄的边界被丢弃，有利于更广泛的边界。如果有几个   相同的'border-width'然后按此顺序首选样式：   'double'，'solid'，'dashed'，'dotted'，'ridge'，'outset'，'groove'，   最低的：'插入'。如果边框样式仅在颜色上有所不同，那么a   在单元格上设置的样式在一行中胜过一行，胜过一行   组，列，列组，最后是表。当两个元素   相同的类型冲突，然后是左边的那个（如果是   table的'direction'是'ltr';对，如果它是'rtl'）并进一步   最高胜利。

Answer 2

这显然是Chrome中的一个错误，截至2017年4月仍然存在。https://bugs.chromium.org/p/chromium/issues/detail?id=548903

Firefox和IE都没有出现此错误，但由于与Chrome共享相同的渲染器，Safari确实出现了错误。

边框中的边框不透明度rgba（x，x，x，y）无法正常工作

2 个答案: