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

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

CSS background: repeating-linear-gradient tweaking

css

linear-gradients