当前位置：首页 > CSS

css制作刻度

2026-01-28 05:26:17CSS

使用线性渐变创建刻度线

通过CSS的linear-gradient背景属性可以生成均匀分布的刻度线。设置背景为横向或纵向渐变，通过颜色断点控制刻度间距和粗细。

.scale {
  width: 300px;
  height: 30px;
  background: linear-gradient(to right, 
    black 0%, 
    black 2%, 
    transparent 2%, 
    transparent 10%
  );
  background-size: 10% 100%;
}

使用伪元素批量生成刻度

通过:before或:after伪元素结合box-shadow属性，可高效创建重复刻度。这种方法适合需要动态调整刻度数量的场景。

.scale::before {
  content: "";
  display: block;
  height: 20px;
  width: 1px;
  box-shadow: 
    10px 0 #000,
    20px 0 #000,
    30px 0 #000;
}

利用border制作主副刻度

通过控制元素的border属性实现不同粗细的刻度线。结合nth-child选择器可交替设置主刻度与副刻度样式。

.scale div {
  border-left: 1px solid black;
  height: 10px;
}
.scale div:nth-child(5n) {
  height: 15px;
  border-left-width: 2px;
}

SVG实现精确刻度控制

使用SVG的<line>元素可以精确控制刻度的位置、长度和样式。适合需要复杂刻度系统的场景。

<svg width="300" height="30">
  <line x1="0" y1="20" x2="0" y2="30" stroke="black"/>
  <line x1="30" y1="15" x2="30" y2="30" stroke="black"/>
  <line x1="60" y1="10" x2="60" y2="30" stroke="black"/>
</svg>

CSS变量控制刻度参数

通过CSS变量动态调整刻度参数，实现响应式刻度系统。修改变量值即可全局调整刻度样式。

css制作刻度

:root {
  --scale-color: #333;
  --major-height: 15px;
  --minor-height: 8px;
}
.scale {
  --tick-width: 1px;
  background: repeating-linear-gradient(
    to right,
    var(--scale-color),
    var(--scale-color) var(--tick-width),
    transparent var(--tick-width),
    transparent 10%
  );
}