像刻度这种东西都是重复性的，说到
重复我就想到了
repeating-linear-gradient，看名字就能知道是
重复线性渐变，它能更方便的实现
隔行变色的功能，如果你想画一个背景，它是重复、隔行的，那么用它就没错了；效果图
原理
尺子刻度分成三种
厘米刻度、
半厘米刻度、
毫米刻度，那么在一个元素上画三个
重复线性渐变就行啦👌基础用法
background-image: repeating-linear-gradient(90deg, red 0, red 50px, blue 0, blue 200px);效果如下：
简单理解：
red 0, red 100px表示
0到
100px的位置渲染绿色，
blue 0, blue 200px表示
0到
200px的位置渲染红色，然后重复，所以红色实际看到的是
150px；拆分步骤
1. 刻度尺盒子
首先得画一个盒子，宽度为
16cm，目的是
15cm的尺子，左右
内边距各为
.5cm：
.ruler {
width: 16cm;
height: 3cm;
border: 1px solid $color-border;
}效果如下：
2. 厘米刻度
一刻度的宽度为
5px，然后每隔
1cm画一个刻度（用透明色隔开）：
background-image: repeating-linear-gradient(90deg, $color-main 0, $color-main 5px, transparent 0, transparent 1cm);效果如下：
