CSS渐变开始消失

Question

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

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

.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%)
}

Answer 1

使渐变容易并调整background-size

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

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

.more-stripes {
 background: 
    linear-gradient(to right,transparent calc(100% - 5px),red 0 100%)
    left/20px 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,transparent 0 40px,red 0 45px)
    left/100px 100% no-repeat;
}

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

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