[CSS渐变每x％生成更多行时就开始褪色

Question

我正在尝试创建一个仅在每个x％处显示一条红线的渐变。

[当我开始生成更多线条时，红色条纹似乎开始褪色为白色。.four-stripes选择器给出了不错的结果，但是当我再添加一条红线时，就像在more-stripes中一样，一切开始变得模糊...参见codepen for an example：

div {
  width: 1200px;
  height: 20px;
}

.four-stripes {
  background: linear-gradient(90deg,red 0.00% 0.27%,transparent 0.27% 1.92%,red 1.92% 2.19%,transparent 2.19% 3.84%,red 3.84% 4.11%,transparent 4.11% 5.75%,red 5.75% 6.03%,transparent 6.03% 100%);
}

.more-stripes {
 background: linear-gradient(90deg,red 0.00% 0.27%,transparent 0.27% 1.92%,red 1.92% 2.19%,transparent 2.19% 3.84%,red 3.84% 4.11%,transparent 4.11% 5.75%,red 5.75% 6.03%,transparent 6.03% 7.67%,red 7.67% 7.95%,transparent 7.95% 100%)
}

<div>
  <div class="four-stripes"></div>
  <div class="more-stripes"></div>
</div>

Answer 1

使用“重复线性梯度”可能会有所帮助。

div {
  width: 1200px;
  height: 20px;
}

.more-stripes {
  background: repeating-linear-gradient(
    90deg,
    red,
    red 5px,
    transparent 5px,
    transparent 20px
  );
}

<div>
  <div class="more-stripes"></div>
</div>

Answer 2

简化渐变色并调整background-size。

div {
  height: 20px;
  margin:5px;
}

.four-stripes {
  background: 
    linear-gradient(to right,red 5px,transparent 0 100%)
    left/25% 100%;
}

.more-stripes {
 background: 
    linear-gradient(to right,red 5px,transparent 0 100%)
    left/15% 100%;
}

<div>
  <div class="four-stripes"></div>
  <div class="more-stripes"></div>
</div>

或者如果要在条纹之间保持固定距离，则这样：

div {
  height: 20px;
  margin:5px;
}

.four-stripes {
  background: 
    repeating-linear-gradient(to right,red 0 5px,transparent 0 40px)
    left/calc(4*40px) 100% no-repeat;
}

.more-stripes {
 background: 
    repeating-linear-gradient(to right,red 0 5px,transparent 0 40px)
    left/calc(6*40px) 100% no-repeat;
}

<div>
  <div class="four-stripes"></div>
  <div class="more-stripes"></div>
</div>