css制作标尺

使用 CSS 制作标尺的方法

方法一：使用线性渐变和伪元素

通过 linear-gradient 和伪元素实现刻度线，适合简单的水平或垂直标尺。

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

.ruler::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 15px;
  border-left: 1px solid #000;
}

.ruler::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  height: 15px;
  border-right: 1px solid #000;
}

方法二：使用 Flex 布局和子元素

通过 Flex 布局动态生成刻度，适合需要动态调整刻度的场景。

.ruler {
  display: flex;
  width: 300px;
  height: 30px;
  border-top: 1px solid #000;
}

.ruler div {
  flex: 1;
  border-left: 1px solid #000;
  height: 10px;
}

.ruler div:nth-child(5n) {
  height: 20px;
}

方法三：垂直标尺实现

调整方向为垂直，通过旋转或修改渐变方向。

.vertical-ruler {
  width: 30px;
  height: 300px;
  background: linear-gradient(
    to bottom,
    #000 1px,
    transparent 1px,
    transparent 9px
  );
  background-size: 100% 10px;
}

方法四：添加数字标签

结合 HTML 和 CSS 为刻度添加数字标记。

<div class="ruler-with-labels">
  <div class="tick" style="left: 0px;">0</div>
  <div class="tick" style="left: 50px;">50</div>
  <div class="tick" style="left: 100px;">100</div>
</div>

.ruler-with-labels {
  position: relative;
  width: 300px;
  height: 40px;
  background: linear-gradient(to right, #000 1px, transparent 1px);
  background-size: 10px 100%;
}

.tick {
  position: absolute;
  top: 15px;
  transform: translateX(-50%);
  font-size: 12px;
}

注意事项

• 使用 background-size 控制刻度间隔，调整数值可改变密度。
• 伪元素 (::before, ::after) 适合添加起始和结束标记。
• 垂直标尺需将 to right 改为 to bottom，并调整宽高比例。
• 数字标签需通过绝对定位精确对齐刻度线。