有没有办法进行多色边框答案

【问题标题】：Is there a way for multicolor bordering有没有办法进行多色边框
【发布时间】：2020-02-24 00:17:37
【问题描述】：

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

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

通过点击这些单元格，我想改变它的颜色，如下图所示。

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

谢谢

【问题讨论】：

也许使用border-image ..？

标签： javascript html css html-table

【解决方案1】：

在这里扩展@king neo 的代码。我试过 box-shadow: inset 和 ::before 给出第二行，除了边框本身，但失败了。即使是边框也不起作用，因为底部边框在遇到左边框和右边框时被卡在角落。

我能想到的就是使用带有渐变的背景。虽然这是一个假边框，但 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>

【讨论】：

【解决方案2】：

玩转这段代码

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;
     }
}

.odd {
  background-color: lightblue;
}
.evn {
  background-color: lightgrey;
}
.selodd {
  background-color: yellow;
}
.selevn {
  background-color: yellow;
}

<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>

【讨论】：