为弹性容器中的多个项目添加渐变答案

【问题标题】：adding gradients to multiple items in a flex container为弹性容器中的多个项目添加渐变
【发布时间】：2019-09-27 19:26:26
【问题描述】：

如何在考虑项目数量的同时，将渐变类添加到此 flex 容器内的多个项目中？目前它只能通过向一组特定的“单元”添加一个类并产生单独的渐变来工作。

我想要一个渐变来覆盖两个或更多项目，同时保持所有项目的弹性和相等。

     .chart {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 0 15px;
        margin-bottom: 50px;
      }
      .dot-black {
        width: 8px;
        height: 8px;
        border-radius: 4px;
        background: black;
      }

      .dot-grey {
        width: 22px;
        height: 22px;
        border-radius: 11px;
        background: grey;
      }

      .dot-green {
        width: 22px;
        height: 22px;
        border-radius: 11px;
        background: green;
      }

        .unit {
          flex: 1;
          display: flex;
          align-items: center;
         }

      .line-black {
      	height: 2px;
      	background: black;
        
      }

      .line-grey {
      	height: 2px;
      	background: grey;
        flex-grow: 1;
      }

      .gradient {
        background: rgb(2,0,36);
        background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
       }

    <div class="chart">
      <div class="unit gradient">
        <div class="dot-black"></div>
        <div class="line-grey"></div>
        <div class="dot-grey"></div>
      </div>
      <div class="unit gradient">
        <div class="line-grey"></div>
        <div class="dot-grey"></div>
      </div>
        <div class="unit">
        <div class="line-grey"></div>
        <div class="dot-grey"></div>
      </div>
        <div class="unit">
        <div class="line-grey"></div>
        <div class="dot-grey"></div>
      </div>
        <div class="unit">
        <div class="line-grey"></div>
        <div class="dot-grey"></div>
      </div>
        <div class="unit">
        <div class="line-grey"></div>
        <div class="dot-grey"></div>
      </div>
        <div class="unit">
        <div class="line-grey"></div>
        <div class="dot-grey"></div>
      </div>
        <div class="unit">

        <div class="line-grey"></div>
        <div class="dot-grey"></div>
      </div>
    </div>

【问题讨论】：

目前正在研究解决方案。 JavaScript 有时很难，但我会尽快发布答案！

标签： css flexbox linear-gradients css-gradients

【解决方案1】：

如果该线上的点数已知并且永远不会改变，您可以自己计算色标并实施它们，以便该线形成一个完整的渐变。

但是，如果您想将某些东西应用于类似的事情，我的建议是使用 Javascript。

此函数将为您计算梯度。这很困难，但可以在应用程序中实现它，这样它就可以真正改变 CSS。我已经手动完成了两个单位的计算：

//background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
function gradientProgress(gStart,gEnd,at){
  //gStart and gEnd are [r,g,b,a,%]
  var prog = (at - gStart[4]) / (gEnd[4] - gStart[4]);
  var res = [0,0,0,0,100]
  for(var a = 0;a<4;a++){
    res[a] = Math.round(gStart[a] + (prog * (gEnd[4] - gStart[4])));
  }
  return res;
}
console.log("First one: " + "[2, 0, 36, 1, 0], [9, 9, 121, 1, 70], [" + (gradientProgress([9,9,121,1,35],[0,212,255,1,100],50)).toString() + "]")

.chart {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 0 15px;
        margin-bottom: 50px;
      }
      .dot-black {
        width: 8px;
        height: 8px;
        border-radius: 4px;
        background: black;
      }

      .dot-grey {
        width: 22px;
        height: 22px;
        border-radius: 11px;
        background: grey;
      }

      .dot-green {
        width: 22px;
        height: 22px;
        border-radius: 11px;
        background: green;
      }

        .unit {
          flex: 1;
          display: flex;
          align-items: center;
         }

      .line-black {
      	height: 2px;
      	background: black;
        
      }

      .line-grey {
      	height: 2px;
      	background: grey;
        flex-grow: 1;
      }

<div class="chart">
      <div class="unit gradient" style="background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 70%, rgba(24,24,136,16) 100%);">
        <div class="dot-black"></div>
        <div class="line-grey"></div>
        <div class="dot-grey"></div>
      </div>
      <div class="unit gradient" style="background: linear-gradient(90deg, rgba(24,24,136,16) 0%, rgba(0,212,255,1) 100%);">
        <div class="line-grey"></div>
        <div class="dot-grey"></div>
      </div>
        <div class="unit">
        <div class="line-grey"></div>
        <div class="dot-grey"></div>
      </div>
        <div class="unit">
        <div class="line-grey"></div>
        <div class="dot-grey"></div>
      </div>
        <div class="unit">
        <div class="line-grey"></div>
        <div class="dot-grey"></div>
      </div>
        <div class="unit">
        <div class="line-grey"></div>
        <div class="dot-grey"></div>
      </div>
        <div class="unit">
        <div class="line-grey"></div>
        <div class="dot-grey"></div>
      </div>
        <div class="unit">

        <div class="line-grey"></div>
        <div class="dot-grey"></div>
      </div>
    </div>

【讨论】：

【解决方案2】：

您可以控制父元素上的渐变，您可以在其中指定所需的背景大小，以便仅覆盖所需的元素：

.chart {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 15px;
  margin-bottom: 50px;
  background:
    linear-gradient(90deg, rgba(2, 0, 36, 1), rgba(9, 9, 121, 1) 35%, rgba(0, 212, 255, 1)) 
    left /* Start from the left */
    / 
    calc(var(--n,0)* 100%/8) 100%  /* we have 8 circles so Nx(width)/8 */
    content-box /* Cover only the content, don't account for padding */
    no-repeat; /* Don' repeat */
}

.dot-black {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: black;
}

.dot-grey {
  width: 22px;
  height: 22px;
  border-radius: 11px;
  background: grey;
}

.dot-green {
  width: 22px;
  height: 22px;
  border-radius: 11px;
  background: green;
}

.unit {
  flex: 1;
  display: flex;
  align-items: center;
}

.line-black {
  height: 2px;
  background: black;
}

.line-grey {
  height: 2px;
  background: grey;
  flex-grow: 1;
}

<div class="chart" style="--n:2">
  <div class="unit">
    <div class="dot-black"></div>
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">

    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
</div>

<div class="chart" style="--n:5">
  <div class="unit">
    <div class="dot-black"></div>
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">

    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
</div>

<div class="chart" style="--n:6">
  <div class="unit">
    <div class="dot-black"></div>
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">
    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
  <div class="unit">

    <div class="line-grey"></div>
    <div class="dot-grey"></div>
  </div>
</div>

如果你有兴趣，你可以构建整个布局，只有背景，没有 html 元素：

.chart {
  margin: 0 15px 5px;
  height:22px;
  background: 
   /* Small dot */
   radial-gradient(circle 4px,black 95%,transparent 100%) left center/8px 8px no-repeat,
   /* horizontal line */
   linear-gradient(grey,grey) center/100% 2px  no-repeat,
   /* big dots */
   radial-gradient(circle 11px at calc(100% - 11px) 50% ,grey 95%,transparent 100%) left/calc(100%/8) 100%,
   /* Our Gradient */
   linear-gradient(90deg, rgba(2, 0, 36, 1), rgba(9, 9, 121, 1) 35%, rgba(0, 212, 255, 1)) left/calc(var(--n, 0)* 100%/8) 100% no-repeat;
}

<div class="chart" ></div>
<div class="chart" style="--n:2"></div>
<div class="chart" style="--n:5"></div>
<div class="chart" style="--n:8"></div>

【讨论】：

@woopsie --n:2 是一个 CSS 变量，允许您选择元素的数量，我使用这个变量来定义 CSS 中渐变的大小
@woopsie 我做了一些更新以使其清楚，我还添加了另一个想法
它是某种东西的简写吗？我在哪里可以找到有关它的文档？
@woopsie 这是一个新功能，你可以在这里阅读：developer.mozilla.org/en-US/docs/Web/CSS/…
@woopsie 它被称为 CSS 变量，它是 CSS 的一个新特性。您可以在我分享的链接中找到详细信息