Question

我有多个<a>我希望有一个渐变遍历所有这些渐变而不会破坏。我已经使jsfiddle变得更加明确，在jsfiddle中，渐变开始并在同一个<a>结束，但我想从第一个开始到最后一个结束。 / p>

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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/

btw我从这里得到了每个渐变点https://meyerweb.com/eric/tools/color-blend/#006680:00B8E6:6:hex

Answer 2

这是我想出的：

如果您想使用单个渐变，则必须将渐变赋予父元素并从那里开始。我这样做了，并添加了一些span元素，用你选择的灰色背景颜色分隔按钮。

谢尔盖正确地指出的另一个选择是将梯度上调并在每个块上单独放置不同的渐变。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

如何制作连续渐变？

2 个答案: