CSS重复线性渐变线宽差异问题

Question

这是我在div上的线性渐变，但是水平线的宽度不同

.pattern1{
  height: 252px;
  background:
    linear-gradient(to right, red 30px, transparent 0),
    repeating-linear-gradient(to bottom, white 0 40px, black 0 42px)
}

<div class='pattern1'></div>

我们可以做些什么来使线宽恒定。我正在使用Chrome版本81.0.4044.138

Answer 1

这里是另一种方式。也许您不会对此有疑问：

.pattern1{
  height: 252px;
  background:
    linear-gradient(to right, red 30px, transparent 0),
    radial-gradient(circle at bottom, black 2px, transparent 0) top/ 1px 42px;
}

<div class='pattern1'></div>