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