如何使用CSS创建具有2种或更多颜色的元素(链接)，使其看起来像彩虹

Question

在D3中的节点之间设置链接样式时.js可以更改链接的颜色。在下面的代码中，我使用了宽度为 10 且 stoke 颜色为灰色的非常粗的链接。

link = svg.append("g")
.
.
.
.style("stroke", "grey")
.style("stroke-width", "10px")

你们知道如何以 2 个链接获得 1 种或更多颜色的方式设置链接样式吗？让链接看起来像彩虹？这意味着链接从链接的开始到链接的结束有 2 种或更多颜色。我只尝试使用 D3.js但没有奏效。有人知道CSS解决方案吗？

多谢！

Answer 1

CSS Linear Gradients 将是最好的选择。

#grad1 {
    height: 200px;
    background: red; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left, orange , yellow, green, cyan, blue, violet); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, orange, yellow, green, cyan, blue, violet); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, orange, yellow, green, cyan, blue, violet); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, orange , yellow, green, cyan, blue, violet); /* Standard syntax (must be last) */
}

<a href="#" id="grad1">Click Me</a>

Answer 2

如果你想要多色文本，请使用：

.rainbow {
  background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  color:transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

<div class='rainbow'> This is test text</div>

Answer 3

你可以去Tehere并生成渐变颜色，然后将代码复制粘贴到CSS中