css制作标尺

使用 CSS 制作标尺

通过 CSS 的线性渐变和伪元素可以轻松实现标尺效果。以下是一个简单的实现方法：

<div class="ruler"></div>

.ruler {
  height: 30px;
  background: linear-gradient(to right, 
    #000 0%, 
    #000 1%, 
    transparent 1%, 
    transparent 99%, 
    #000 99%, 
    #000 100%);
  background-size: 10% 100%;
  position: relative;
}

.ruler::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10px;
  background: linear-gradient(to right, 
    #000 0%, 
    #000 1%, 
    transparent 1%, 
    transparent 49%, 
    #000 49%, 
    #000 51%, 
    transparent 51%, 
    transparent 99%, 
    #000 99%, 
    #000 100%);
  background-size: 2% 100%;
}

垂直标尺的实现

将上述方法稍作修改即可创建垂直标尺：

.vertical-ruler {
  width: 30px;
  background: linear-gradient(to bottom, 
    #000 0%, 
    #000 1%, 
    transparent 1%, 
    transparent 99%, 
    #000 99%, 
    #000 100%);
  background-size: 100% 10%;
  position: relative;
}

.vertical-ruler::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 10px;
  background: linear-gradient(to bottom, 
    #000 0%, 
    #000 1%, 
    transparent 1%, 
    transparent 49%, 
    #000 49%, 
    #000 51%, 
    transparent 51%, 
    transparent 99%, 
    #000 99%, 
    #000 100%);
  background-size: 100% 2%;
}

带数字标记的标尺

通过伪元素和 CSS 计数器可以添加数字标记：

.numbered-ruler {
  height: 40px;
  position: relative;
  counter-reset: step;
}

.numbered-ruler::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 30px;
  background: linear-gradient(to right, 
    #000 0%, 
    #000 1%, 
    transparent 1%, 
    transparent 99%, 
    #000 99%, 
    #000 100%);
  background-size: 10% 100%;
}

.numbered-ruler::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10px;
  background: linear-gradient(to right, 
    #000 0%, 
    #000 1%, 
    transparent 1%, 
    transparent 49%, 
    #000 49%, 
    #000 51%, 
    transparent 51%, 
    transparent 99%, 
    #000 99%, 
    #000 100%);
  background-size: 2% 100%;
}

.numbered-ruler span {
  position: absolute;
  top: 32px;
  width: 0;
  text-align: center;
  font-size: 10px;
  counter-increment: step;
}

.numbered-ruler span::before {
  content: counter(step);
}

响应式标尺

使用 CSS 变量和视口单位可以创建响应式标尺：

.responsive-ruler {
  --unit: 1vw;
  height: calc(var(--unit) * 3);
  background: linear-gradient(to right, 
    #000 0%, 
    #000 1%, 
    transparent 1%, 
    transparent 99%, 
    #000 99%, 
    #000 100%);
  background-size: calc(var(--unit) * 10) 100%;
  position: relative;
}

这些方法提供了从简单到复杂的标尺实现方案，可以根据具体需求进行调整和扩展。