如何将边框颜色作为线性渐变放在表格行的边框上？ [复制]

Question

我正在尝试将表格行的边框颜色设置为线性渐变。表格代码如下：

td:first-child {
 border-left: 1px solid black;
 border-bottom-left-radius: 50px;
 border-top-left-radius: 50px;
}

td:last-child {
 border-right: 1px solid black;
 border-bottom-right-radius: 50px;
 border-top-right-radius: 50px;
}

td {
 padding-left: 4%;
 border-top: 1px solid black;
 border-bottom: 1px solid black;
}

我知道我可能需要分别放在第一个、最后一个孩子以及 td 类上。

我在表数据（td）上尝试过以下代码，但没有运气。此代码填充内部表格数据背景而不是边框​​颜色。：

td {
 border-top: 1px solid black;
 border-bottom: 1px solid black;
 border: 1px solid transparent;
 border-radius: 100px;
 background-image: linear-gradient(white, white),
 linear-gradient(178.18deg, #fd749b -13.56%, #281ac8 158.3%);
 background-origin: border-box;
 background-clip: content-box, border-box;
}

预期输出：

Answer 1

请试试这个，

这是表格的演示，

td:first-child {
 border-left: 1px solid black;
 border-bottom-left-radius: 50px;
 border-top-left-radius: 50px;
}

td:last-child {
 border-right: 1px solid black;
 border-bottom-right-radius: 50px;
 border-top-right-radius: 50px;
}
td {
 text-indent:5%;
 border-top: 1px solid black;
 border-bottom: 1px solid black;
 border: 1px solid transparent;
 border-radius: 50px;
 background-image: linear-gradient(white, white),
 linear-gradient(178.18deg, #fd749b -13.56%, #281ac8 158.3%);
 background-origin: border-box;
 background-clip: content-box, border-box;
}

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Dalton</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>