当前位置：首页 > CSS

css制作刻度

2026-04-01 08:09:11CSS

使用线性渐变（linear-gradient）创建刻度

通过CSS的linear-gradient可以模拟刻度线效果，适合简单的横向或纵向刻度条。设置重复渐变可生成等距刻度。

.scale {
  width: 300px;
  height: 20px;
  background: repeating-linear-gradient(
    to right,
    #000,
    #000 1px,
    transparent 1px,
    transparent 10px
  );
}

使用伪元素批量生成刻度

通过:before或:after伪元素配合box-shadow可高效创建多个刻度，减少DOM节点数量。

.scale-markers {
  position: relative;
  height: 30px;
}
.scale-markers:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 1px;
  background: #333;
  box-shadow: 
    20px 0 0 #333,
    40px 0 0 #333,
    60px 0 0 #333;
}

使用CSS Grid布局制作复杂刻度

Grid布局适合需要精确控制刻度和标签位置的场景，特别是需要响应式设计的仪表盘。

.scale-container {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  height: 40px;
}
.marker {
  border-left: 1px solid #555;
  position: relative;
}
.marker::after {
  content: attr(data-value);
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
}

动画刻度效果

添加CSS动画可创建动态刻度效果，适用于加载指示器或进度可视化。

@keyframes pulse {
  0% { opacity: 0.3; }
  50% { opacity: 1; }
  100% { opacity: 0.3; }
}
.animated-marker {
  width: 2px;
  height: 15px;
  background: blue;
  animation: pulse 1.5s infinite;
  animation-delay: calc(var(--order) * 0.1s);
}

三维刻度样式

通过CSS变换和阴影增强立体感，适合需要突出显示主要刻度的场景。

css制作刻度

.dimensional-marker {
  width: 3px;
  height: 20px;
  background: linear-gradient(to right, #999, #ddd);
  transform: perspective(100px) rotateX(20deg);
  box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}