CSS repeating-linear-gradient 线宽差异问题

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>

CSS repeating-linear-gradient 线宽差异问题

CSS repeating-linear-gradient line width difference issue

css

background

linear-gradients