css - 表格边框宽度和颜色的交互

Question

我正在使用 border-right 向我的标题单元格添加一些填充。 (我使用 border-right 而不是 padding 的原因是因为背景上实际上有一张我想移动的图像)。

table {
    border: solid 2px red;
}

th {
  background-color: #ccc; 
  border-right: 25px solid transparent; 
  border-bottom: 1px solid black; 
}

th:after {
 content: "x"; 
 color: red;
}

td:before {
 content: "cell"
}

<table> 
  <thead>
  <tr> 
    <th> foo</th>
    <th> bar </th>
    <th> bizz</th> 
    
    <tr>
  </thead>
  
  <tr> 
    <td/><td/><td/> 
  </tr>
</table>

您可以看到 border-bottom 和 border-right 之间有一个有趣的交互。有没有办法来解决这个问题？

Answer 1

发生这种情况是因为底部边框试图与右边框连接，而右边框的底部并不是真正的底部边框。也许您可以将填充与适当的 background-clip 属性结合使用。