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

Question

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

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

你们知道如何设置链接的样式以使 1 个链接获得 2 种或更多颜色吗？让链接看起来像彩虹？这意味着链接从链接的开头到链接的结尾有 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>