当前位置：首页 > CSS

css制作刻度

2026-02-12 23:51:02CSS

使用CSS制作刻度线

使用CSS的线性渐变（linear-gradient）可以轻松创建刻度线效果。这种方法适用于制作标尺、进度条刻度或任何需要等分标记的场景。

.ruler {
  height: 30px;
  background: linear-gradient(90deg, 
    #000 1px, 
    transparent 1px, 
    transparent calc(10% - 1px), 
    #000 calc(10% - 1px), 
    #000 10%, 
    transparent 10%, 
    transparent calc(20% - 1px), 
    #000 calc(20% - 1px), 
    #000 20%,
    /* 重复模式直到100% */
    transparent 100%
  );
}

使用伪元素创建刻度

通过:before或:after伪元素结合border属性可以创建更精细的刻度控制：

.scale-container {
  position: relative;
  height: 50px;
}

.scale-container::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: repeating-linear-gradient(
    to right,
    #333,
    #333 1px,
    transparent 1px,
    transparent 20px
  );
}

使用CSS变量控制刻度间距

通过CSS变量可以动态调整刻度间距，增加灵活性：

:root {
  --tick-spacing: 10px;
  --tick-width: 2px;
  --tick-color: #555;
}

.dynamic-scale {
  background: repeating-linear-gradient(
    90deg,
    var(--tick-color),
    var(--tick-color) var(--tick-width),
    transparent var(--tick-width),
    transparent var(--tick-spacing)
  );
}

垂直刻度实现

将线性渐变方向改为垂直即可创建垂直刻度：

.vertical-scale {
  width: 30px;
  background: repeating-linear-gradient(
    to bottom,
    #000,
    #000 1px,
    transparent 1px,
    transparent 20px
  );
}

主刻度和次刻度组合

通过多层背景可以实现不同长度的刻度组合：

.combined-scale {
  background: 
    /* 主刻度 */
    repeating-linear-gradient(
      90deg,
      #000,
      #000 2px,
      transparent 2px,
      transparent 50px
    ),
    /* 次刻度 */
    repeating-linear-gradient(
      90deg,
      #888,
      #888 1px,
      transparent 1px,
      transparent 10px
    );
}

响应式刻度布局

结合viewport单位可以实现响应式刻度：

.responsive-scale {
  background: repeating-linear-gradient(
    90deg,
    #000,
    #000 1px,
    transparent 1px,
    transparent 5vw
  );
}

动画刻度效果

添加CSS动画可以让刻度产生流动效果：

.animated-scale {
  background: repeating-linear-gradient(
    90deg,
    #000,
    #000 1px,
    transparent 1px,
    transparent 20px
  );
  animation: scaleMove 2s linear infinite;
}

@keyframes scaleMove {
  from { background-position-x: 0; }
  to { background-position-x: 20px; }
}

这些方法提供了从简单到复杂的各种刻度实现方案，可以根据具体需求选择合适的技术方案。通过调整颜色、间距和方向参数，可以创建各种风格的刻度效果。

css制作刻度