如何让表格单元格橙色下边框覆盖蓝色右边框而非置于其下？

我看到你当前的代码如下：

* { box-sizing: border-box; }
table { border-collapse: collapse; border-spacing: 0; }
td { border-right: 6px solid blue; border-bottom: 6px solid orange; }

<table>
<tr><td>aaa</td><td>aaa</td></tr>
<tr><td>aaa</td><td>aaa</td></tr>
</table>

默认情况下CSS边框的绘制顺序是上 → 右 → 下 → 左，所以右边框会叠在底边框上方，这是标准的渲染逻辑。下面分享几个更优雅的实现方式，帮你实现底边框覆盖右边框的效果：

方法1：用伪元素模拟底边框（最灵活通用） #

这种方法完全避开边框绘制顺序的限制，通过伪元素实现可控制层级的“底边框”：

* { box-sizing: border-box; }
table { border-collapse: collapse; border-spacing: 0; }
td { 
  border-right: 6px solid blue; 
  position: relative; /* 为伪元素提供定位基准 */
  padding-bottom: 6px; /* 预留伪元素的位置，避免内容被遮挡 */
}
/* 用伪元素模拟橙色底边框 */
td::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background-color: orange;
  z-index: 1; /* 强制让伪元素处于右边框之上 */
}

方法2：利用表格边框合并特性调整层级 #

针对表格场景，可以通过精准控制单元格边框的覆盖关系实现效果：

* { box-sizing: border-box; }
table { border-collapse: collapse; border-spacing: 0; }
td { 
  border-right: 6px solid blue;
}
/* 给所有单元格添加底边框 */
tr td {
  border-bottom: 6px solid orange;
}
/* 针对最后一列单元格，补充一个橙色小方块覆盖边框交叉处 */
tr td:last-child {
  position: relative;
}
tr td:last-child::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 6px; /* 和右边框宽度一致 */
  height: 6px; /* 和底边框高度一致 */
  background-color: orange;
}

方法3：用outline替代右边框（极简技巧） #

利用outline的渲染层级低于边框的特性，巧妙实现覆盖效果：

* { box-sizing: border-box; }
table { border-collapse: collapse; border-spacing: 0; }
td { 
  border-bottom: 6px solid orange;
  /* 用outline模拟右边框 */
  outline: 6px solid blue;
  outline-offset: -6px; /* 调整outline位置，和原border-right对齐 */
  /* 裁剪掉上下左方向的outline，只保留右侧 */
  clip-path: inset(0 0 0 -6px);
}

以上几种方案都比取巧的实现更具扩展性，你可以根据自己的实际场景（比如表格列数是否固定、浏览器兼容性要求）选择最合适的一种~

内容的提问来源于stack exchange，提问作者burtek