设置尺子两边边距为
.5cm，调整背景的位置即可：
background-position: .5cm 0;
background-repeat: no-repeat;效果如下：
发现最右边的没有
对齐，原因是最后一个刻度的宽度也为
5px，所以我们得给尺子增加
5px宽度：
width: calc(16cm + 5px);效果如下：
接下来给设置一下刻度的高度为
30px：
background-size: 100% 30px;效果如下：
把位置改成到底部，因为之前的位置只设置了
x轴，那么
y轴设置到
100%即可:
background-position: .5cm 100%;
3. 半厘米刻度
步骤跟厘米刻度一致，做一些小调节即可，设置多背景用逗号分开，其他属性也是：
background-image: "厘米刻度背景", repeating-linear-gradient(90deg, $color-main 0, $color-main 2px, transparent 0, transparent .5cm);
background-size: "厘米刻度大小", 100% 20px; // 高度为20px效果如下：
右边多出来一个刻度，所以背景的宽度不能为
100%，得把它减掉（根据实际情况）：
background-size: "厘米刻度大小", calc(100% - 1cm) 20px;效果如下：
发现
半刻度不在
刻度的中间，还是有一点偏差，得改一下
半刻度
