每x%生成更多行时，CSS渐变开始淡入淡出

Question

我正在尝试创建一个渐变，仅每隔x%显示一条红线。

当我开始生成更多线条时，红色条纹似乎开始褪色为白色。.four-stripes选择器给出了一个不错的结果，但是当我再添加一条红线时，就像more-stripes一样，一切都开始变得模糊...... 有关示例，请参阅代码笔：

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>