如何制作連續漸變？

Question

我有多個<a> ，我希望有一個漸變貫穿所有這些漸變而不會破壞。 我已經讓jsfiddle變得更加明確了，因為jsfiddle漸變開始並在同一個<a>但是我想在第一個開始並在最后一個結束。

 body{ background: lightgray; } .tabs{ margin: 3% 0 0 3%; } .tab { text-decoration: none; color: white; background: linear-gradient(to left,#006680, #00b8e6); padding: 0.5% 2% 0.5% 2%; border: 1px solid black; } .tab:hover { text-decoration: underline; } 

 <div class="tabs"> <a href="#" class="tab">tab1</a> <a href="#" class="tab">tab2</a> <a href="#" class="tab">tab3</a> <a href="#" class="tab">tab4</a> <a href="#" class="tab">tab5</a> <a href="#" class="tab">tab6</a> </div> 

Answer 1

要建立評論，您可以嘗試通過讓父背景遍歷所有這些鏈接來實現一些魔力，或者您可以為每個具有所有停止點的梯度編寫不同的漸變。

.tab:nth-of-type(1) {
  background: linear-gradient(to left,#00ACD7,#00B8E6);
}
.tab:nth-of-type(2) {
  background: linear-gradient(to left,#00A1C9,#00ACD7);
}
.tab:nth-of-type(3) {
  background: linear-gradient(to left,#0095BA,#00A1C9);
}
.tab:nth-of-type(4) {
  background: linear-gradient(to left,#0089AC,#0095BA);
}
.tab:nth-of-type(5) {
  background: linear-gradient(to left,#007D9D,#0089AC);
}
.tab:nth-of-type(6) {
  background: linear-gradient(to left,#00728F,#007D9D);
}

Sass可能會使用顏色函數和for循環來生成這一點，但我不確定你能有多具體。

https://jsfiddle.net/m61es0rv/

順便說一句，我從這里得到每個梯度點https://meyerweb.com/eric/tools/color-blend/#006680:00B8E6:6:hex

Answer 2

這是我想出的：

如果要使用單個漸變，則必須將漸變賦予父元素並從那里開始。 我這樣做了，並添加了一些span元素，用你選擇的灰色背景顏色分隔按鈕。

謝爾蓋正確地指出的另一個選擇是將梯度切斷並在每個塊上單獨放置不同的漸變。

 body{ background: lightgray; } .tabs{ background: linear-gradient(to left,#006680, #00b8e6); display: flex; } .tab { text-decoration: none; color: white; display: inline-block; border: 1px solid black; padding: 0.5% 2% 0.5% 2%; } .tab:hover { text-decoration: underline; } .separator { display: inline-block; width:10px; background: lightgray; } 

 <div class="tabs"> <a href="#" class="tab">tab1</a> <span class="separator"></span> <a href="#" class="tab">tab2</a> <span class="separator"></span> <a href="#" class="tab">tab3</a> <span class="separator"></span> <a href="#" class="tab">tab4</a> <span class="separator"></span> <a href="#" class="tab">tab5</a> <span class="separator"></span> <a href="#" class="tab">tab6</a> <span class="separator"></span> </div>