css - 表格中的边框不透明度 rgba(x,x,x,y) 无法正常工作

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 bottom比其他border都浅，不正常。它看起来像边界相互跨越，但这是不可能的，因为我没有设置任何 border-top。我什至尝试过将 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 conflict resolution

In the collapsing border model, borders at every edge of every cell may be specified by border properties on a variety of elements that meet at that edge (cells, rows, row groups, columns, column groups, and the table itself), and these borders may vary in width, style, and color. The rule of thumb is that at each edge the most "eye catching" border style is chosen, except that any occurrence of the style 'hidden' unconditionally turns the border off.

The following rules determine which border style "wins" in case of a conflict:

Borders with the 'border-style' of 'hidden' take precedence over all other conflicting borders. Any border with this value suppresses all borders at this location. Borders with a style of 'none' have the lowest priority. Only if the border properties of all the elements meeting at this edge are 'none' will the border be omitted (but note that 'none' is the default value for the border style.) If none of the styles are 'hidden' and at least one of them is not 'none', then narrow borders are discarded in favor of wider ones. If several have the same 'border-width' then styles are preferred in this order: 'double', 'solid', 'dashed', 'dotted', 'ridge', 'outset', 'groove', and the lowest: 'inset'. If border styles differ only in color, then a style set on a cell wins over one on a row, which wins over a row group, column, column group and, lastly, table. When two elements of the same type conflict, then the one further to the left (if the table's 'direction' is 'ltr'; right, if it is 'rtl') and further to the top wins.