天平之类的东西是重复的。说到重复，我想到了repeating-linear-gradient。看名字Gradient就知道是重复线性的，可以更方便的实现交错变色的功能。如果你想画一个背景，它是重复的、交错的，那么用它就对了；毫米尺度，然后在一个元素上绘制三个重复的线性渐变？基本用法background-image:repeating-linear-gradient(90deg,red0,red50px,blue0,blue200px);效果如下：简单理解：red0,red100px表示在0到100px的位置渲染绿色，blue0,blue200px表示在0到200px的位置渲染红色，然后重复，所以实际的红色是150像素；拆分步骤1.首先得到刻度框画一个宽16cm的框，目的是15cm的尺子，左右内边距0.5cm：.ruler{width:16cm;高度：3cm；border:1pxsolid$color-border;}效果如下：2.cm刻度的宽度为5px，然后每隔1cm画一个刻度（用透明色隔开）：background-image:repeating-linear-gradient(90deg,$color-main0,$color-main5px,transparent0,transparent1cm);效果如下：设置尺子两边边距为.5cm，调整背景位置：background-position:.5cm0;background-repeat:no-repeat;效果如下：最右边没有对齐，原因是最后一个刻度尺的宽度也是5px，所以我们要给尺子加上5px的宽度：width:calc(16cm+5px);效果如下：接下来设置刻度的高度为30px：background-size:100%30px;效果如下：把位置改到底部，因为之前的位置只设置了x轴，那么设置y轴为100%：background-position:.5cm100%;3.半厘米刻度步长和厘米刻度一样，只是做一些小的调整，设置多个背景用逗号隔开，其他属性也是：background-image:"厘米刻度背景",repeating-linear-gradient(90deg,$color-main0,$color-main2px,transparent0,transparent.5cm);background-size:"厘米级尺寸",100%20px;//高度为20px的效果如下：右边多了一个刻度，所以背景的宽度不能为100%，必须减去（根据实际情况）：background-size:"厘米级尺寸",calc(100%-1cm)20px;效果如下：发现半刻度不在刻度中间，还是有一点偏差。需要改变半刻度的背景位置：background-position:"cmscaleposition",(.5cm+1.5px)100%;效果如下：4.毫米刻度步长也同上：background-image:"厘米刻度背景","半厘米刻度背景",repeating-linear-gradient(90deg,$color-main0,$color-main1px,transparent0,transparent.1cm);background-size:"厘米比例尺","半厘米比例尺",calc(100%-1.2cm)10px;//高度为10pxbackground-position:"厘米比例位置","半厘米比例位置",calc(.5cm+2px)100%;//裁剪背景效果如下：5.将数字0-15放在方框内：
