如何避免固定表头与列的linear-gradient叠加效果？

我有一个带固定表头和固定列的表格，目前表头底部和固定列右侧都添加了渐变效果，但在左上角的固定单元格处，两个渐变叠加后出现了双重加深的效果，希望只保留单一渐变。能不能用mix-blend-mode实现？或者有没有其他纯CSS/HTML的技巧解决这个问题？

原代码 #

CSS #

table {
    border-collapse: collapse
}

td,
th {
    background: white;
    padding: 24px;
    border: 1px solid black;
}

th {
    position: sticky;
    top: 0;
}
th::after {
    background-image: linear-gradient(180deg, gray 0%, transparent 100%);
    bottom: 0;
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    transform: translateY(100%);
    height: 16px;
}

th:first-child {
    z-index: 2
}

tr > td:first-child,
th:first-child {
    position: sticky;
    left: 0;
}
   
tr > td:first-child::before,
th:first-child::before {
    background-image: linear-gradient(90deg, gray 0%, transparent 100%);
    bottom: 0;
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    transform: translateX(100%);
    width: 16px;
}

HTML #

<div>
<table style="width: 500px">
   <thead>
      <th class="fixed">Fixed column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
   </thead>
   <tbody>
     <tr>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
     </tr>
     <tr>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
     </tr>
     <tr>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
     </tr>
     <tr>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
     </tr>
     <tr>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
     </tr>
     <tr>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
     </tr>
   </tbody>
</table>
</div>

问题图示 #

解决方案 #

方法1：隐藏左上角单元格的其中一个渐变 #

直接让左上角固定表头的底部渐变不显示，避免叠加：

th:first-child::after {
    display: none;
}

方法2：调整渐变范围，避免重叠 #

如果想保留两个渐变但不重叠，调整左上角表头的底部渐变右侧范围，避开右侧渐变区域：

th:first-child::after {
    right: 16px; /* 和右侧渐变的宽度保持一致 */
}

方法3：使用mix-blend-mode调整叠加效果 #

通过混合模式让叠加区域颜色统一，避免加深：

th:first-child::before {
    mix-blend-mode: lighten;
}

lighten模式会取两个颜色中较亮的一个，可根据实际颜色调整混合模式（如screen、overlay等）。

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