像刻度这种东西都是重复性的，说到 重复 我就想到了 re PE ating-linear-gra die nt ，看名字就能 知道 是 重复线性渐变 ，它能更方便的实现 隔行 变色的功能，如果你想画一个背景，它是重复、隔行的，那么用它就没错了；
效果图
原理
尺子刻度分成三种 厘米刻度 、 半 厘米刻度 、 毫米刻度 ，那么在一个元素上画三个 重复线性渐变 就行啦& # 128076;
基础用法
background -i mage: repeating-linear-gradient(90 deg , 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;
h ei ght: 3cm;
border: 1px solid $color-border;
}
效果如下：
2. 厘米刻度
一刻度的宽度为 5px ，然后每隔 1cm 画一个刻度（用透明色隔开）：
background-image: repeating-linear-gradient(90deg, $color-m ai n 0, $color-main 5px, transparent 0, transparent 1cm);
效果如下：
设置尺子两边 边距 为 .5cm ， 调整 背景的位置即可：
background-pos IT ion: .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 -s ize: "厘米刻度大小", calc(100% - 1cm) 20px;
效果如下：
发现 半刻度 不在 刻度 的中间，还是有 一点 偏差，得改一下 半刻度 的背景位置：
background-position: "厘米刻度位置", (.5cm + 1.5px) 100%;
效果如下：
4. 毫米刻度
步骤也跟上面一致：
background-image: "厘米刻度背景", "半厘米刻度背景", repeating-linear-gradient(90deg, $color-main 0, $color-main 1px, transparent 0, transparent .1cm); background-size: "厘米刻度大小", "半厘米刻度大小", calc(100% - 1.2cm) 10px; // 高度为10px background-position: "厘米刻度位置", "半厘米刻度位置", calc(.5cm + 2px) 100%; // 裁剪背景
效果如下：
5. 数字
在盒子里面放 0-15 数字：
<div class="ruler"> <span>0-15</span> </div>
样式增加如下即可：
.ruler {
dis play : flex;
justify-content: space-between;
span {
flex: 1;
m arg in -t op: 55px;
text-align: center ;
}
}
效果如下：
codepen 地址： css刻度尺
洗剪吹
相似的案例还有螺纹 进度 条，由于是一样的，所以只放一个啦，托尼老师洗剪吹店门前那个彩带也还行哈哈：
codepen 地址： css洗剪吹
最后
哈哈哈，不知道说啥，刻度尺没啥用，但是很有趣，不是吗 ❗
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
总结
以上是 为你收集整理的 html5借用repeating-linear-gradient实现一把刻度尺（ruler） 全部内容，希望文章能够帮你解决 html5借用repeating-linear-gradient实现一把刻度尺（ruler） 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5借用repeating-linear-gradient实现一把刻度尺（ruler）的详细内容...