如何使用CSS創建2種或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線性漸變將是最好的選擇。

 #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

您可以轉到此處並生成漸變顏色，然后將代碼復制粘貼到CSS中

Answer 3

如果要使用多種顏色的文本，請使用：

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