CSS背景：重复线性渐变调整

Question

我正在尝试调整一些css代码 - 精确地重复线性渐变。

这是我目前的代码：

input[type="range"]::-moz-range-track {
  background: repeating-linear-gradient(to right, 
    #ccc, 
    #000 10%, 
    #ccc 1%, 
    #000 10%, 
    #ccc 10%, 
    #ccc 20%
);

以下是其外观的图像： 这就是我想要做的事：

我该怎么做？

Answer 1

添加以下css：

input[type="range"]::-moz-range-track {
  background: repeating-linear-gradient(to right, 
    #ccc 9%, 
    #000 10%, 
    #ccc 1%, 
    #000 10%, 
    #ccc 10%, 
    #ccc 20%
);

<input type="range" />

Answer 2

我已经测试过了！

input[type="range"]::-moz-range-track {
  background: repeating-linear-gradient(to right, 
    #ccc 9%, 
    #000 10%, 
    #ccc 1%, 
    #000 5%, 
    #ccc 10%, 
    #ccc 28.5%
)
}