用repeating-linear-gradient实现一把刻度尺（ruler）📏

2024-01-18 22:48:29

前言

刻度尺是一种常见的测量工具，用于测量长度或距离。我们可以使用CSS中的repeating-linear-gradient属性来实现一把刻度尺。repeating-linear-gradient属性可以创建重复的线性渐变，这非常适合用于创建刻度尺。

创建刻度尺盒子

首先，我们需要创建一个刻度尺盒子。我们可以使用div元素来创建刻度尺盒子。

.ruler {
  width: 300px;
  height: 50px;
  border: 1px solid black;
  background: repeating-linear-gradient(
    to right,
    #000 0%,
    #000 1%,
    #fff 1%,
    #fff 100%
  );
}

创建厘米刻度

现在，我们需要在刻度尺盒子里创建厘米刻度。我们可以使用::before伪元素来创建厘米刻度。

.ruler::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    to bottom,
    #000 0%,
    #000 5%,
    #fff 5%,
    #fff 100%
  );
}

创建半厘米刻度

现在，我们需要在刻度尺盒子里创建半厘米刻度。我们可以使用::after伪元素来创建半厘米刻度。

.ruler::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    to bottom,
    #000 0%,
    #000 2.5%,
    #fff 2.5%,
    #fff 100%
  );
}

创建毫米刻度

现在，我们需要在刻度尺盒子里创建毫米刻度。我们可以使用::marker伪元素来创建毫米刻度。

.ruler::marker {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    to bottom,
    #000 0%,
    #000 1%,
    #fff 1%,
    #fff 100%
  );
}

添加数字

现在，我们需要在刻度尺上添加数字。我们可以使用::text伪元素来添加数字。

.ruler::text {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 12px;
  color: #000;
}