連続グラデーションを作成するには？

Question

私は複数の<a>を持っています。私は壊さずにすべてを通過するグラデーションを持っていました。 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); 
} 

あなたはおそらくこれがループの色機能とAを使ってサスにより多少生成することができたが、私はあなたがすることができるだろうか、特定わかりません。

https://jsfiddle.net/m61es0rv/

はところで私はあなたが1行としてそれらを作るとその親のためのグラデーションを作るか、あなたはそれを作るために、勾配のためにこれらの「停止ポイント」を計算する必要がここでもhttps://meyerweb.com/eric/tools/color-blend/#006680:00B8E6:6:hex

Answer 2

ここに私が思い付いたものです：あなたは、単一のグラデーションを使用する場合は、親要素に勾配を与えるから行かなければならないとしている

そこ。私はちょうどそれを行い、あなたが選んだ灰色の背景色でボタンを分けるためにいくつかのスパン要素を追加しました。

Sergeyとして正式に述べられているもう1つの選択肢は、勾配を上げて各ブロックに異なる勾配を個別に設定することです。

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>