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