html - 如何为单个边框设置多种颜色

Question

我需要为单个边框设置多种颜色，如下图所示。但是这里我在一个 tr 中使用了三个 td 元素。我需要一个 td 元素，边框必须是其 (td) 的底部或顶部边框。

<table style="border-spacing:0px;margin-top:5%;margin-left:2%" cellpadding="0" width="25%">
  <tbody>
    <tr>
      <td width="5%" style="border-bottom: 3px solid red;">       </td>
      <td width="90%" style="border-bottom: 3px solid green;">
      </td>
      <td width="5%" style="border-bottom: 3px solid red;">       </td>
    </tr>
  </tbody>
 </table>

Answer 1

您可以通过以下方式进行。请检查。

.test {
  width: 500px;
  height: 100px;
  background-color: #ccc;
  position: relative;
}

.test:before, .test:after {
  content: "";
  position: absolute;
  left: 0px;
  right: 0px;
  height: 10px;
  background-image: -webkit-linear-gradient(0deg, red 20px, blue 20px, blue 40px, yellow 40px, yellow 60px, green 60px, green 80px);
  background-image: -ms-linear-gradient(0deg, red 20px, blue 20px, blue 40px, yellow 40px, yellow 60px, green 60px, green 80px);
  background-size: 80px;
}

.test:before {
  top: 0px;
}
.test:after {
  bottom: 0px;
}

<table>
<tr>
  <td class="test">
    1
  </td>
  <td class="test">
    2
  </td>
</tr>
</table>