javascript - 有没有办法实现多色边框

Question

我有td，它的CSS现在是这样的

td {
   border-bottom: 3px solid aqua;
}

通过单击这些单元格，我想更改其颜色，如下图所示。

有没有办法改变多色边框？

谢谢

Answer 1

在这里扩展 @king neo 的代码。我尝试了 box-shadow: inset 和::before 来给出除边框本身之外的第二行，但失败了。甚至边框也不起作用，因为当遇到左边框和右边框时，下边框在 Angular 处被卡住了。

我能想到的就是使用带有渐变的背景。但这是一个假边框，td 单元格内的任何元素都将位于其上方。您可以使用填充来修复此问题，但如果您在选择时添加填充，表格将会跳来跳去。因此，您还需要在未选定的行上添加填充。

我还使用了 CSS 变量，因此可以轻松地在一个地方更改多个内容。

var prevRow = null;
function toggle(it) {
  if (it.className.substring(0, 3) == "sel")
    {
    it.className = it.className.substring(3, 6);
     prevRow = null;
     }
  else
    {
    it.className = "sel" + it.className;
    
     if (prevRow != null)
       {
       prevRow.className = prevRow.className.substring(3, 6);
       }
     prevRow = it;
     }
}

 :root {
   --color-cyan: #00ffff;
   --color-yellow: #ffff00;
   --border-width: 2px;
 }

tr:nth-child(odd) {
  background-color: lightblue;
}
tr:nth-child(even) {
  background-color: lightgrey;
}

td {
  padding: var(--border-width);
}

.selodd > td,
.selevn > td {
  --yellow-end-point: var(--border-width);
  --cyan-end-point: calc(2 * var(--border-width));
  --transparent-starting-point: calc(3 * var(--border-width));

  background: linear-gradient(to top,
    var(--color-yellow) var(--yellow-end-point),
    var(--color-cyan) var(--cyan-end-point),
    transparent var(--transparent-starting-point));
  background-repeat: no-repeat;
}

<table border>
 <tr class="odd" onclick="toggle(this)">
  <td>Hello</td>
  <td>Hello</td>
  <td>Hello</td>
  <td>Hello</td>
 </tr>
 <tr class="evn" onclick="toggle(this)">
  <td>Hello</td>
  <td>Hello</td>
  <td>Hello</td>
  <td>Hello</td>
 </tr>
 <tr class="odd" onclick="toggle(this)">
  <td>Hello</td>
  <td>Hello</td>
  <td>Hello</td>
  <td>Hello</td>
 </tr>
 <tr class="evn" onclick="toggle(this)">
  <td>Hello</td>
  <td>Hello</td>
  <td>Hello</td>
  <td>Hello</td>
 </tr>
 <tr class="odd" onclick="toggle(this)">
  <td>Hello</td>
  <td>Hello</td>
  <td>Hello</td>
  <td>Hello</td>
 </tr>
 <tr class="evn" onclick="toggle(this)">
  <td>Hello</td>
  <td>Hello</td>
  <td>Hello</td>
  <td>Hello</td>
 </tr>
</table>