当前位置：首页 > CSS

css制作标尺

2026-03-31 20:34:42CSS

使用CSS制作标尺的方法

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

通过CSS的线性渐变和伪元素可以快速创建水平或垂直标尺效果。

水平标尺示例：

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

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

方法二：使用边框和绝对定位

通过边框和绝对定位创建更精确的刻度标记。

css制作标尺

垂直标尺示例：

.ruler-vertical {
  width: 30px;
  height: 200px;
  position: relative;
  border-left: 1px solid #000;
}

.ruler-vertical::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 10px;
  border-left: 1px solid #000;
}

.ruler-vertical span {
  position: absolute;
  left: 15px;
  width: 10px;
  height: 1px;
  background: #000;
}

方法三：使用Flexbox布局

适用于需要动态调整刻度的场景。

css制作标尺

.ruler-flex {
  display: flex;
  width: 100%;
  height: 20px;
}

.ruler-flex div {
  flex: 1;
  border-right: 1px solid #000;
  position: relative;
}

.ruler-flex div::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  height: 10px;
  width: 1px;
  background: #000;
}

方法四：使用CSS Grid

创建更复杂的标尺布局。

.ruler-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  height: 30px;
  border-top: 1px solid #000;
}

.ruler-grid div {
  border-right: 1px solid #ccc;
  position: relative;
}

.ruler-grid div:nth-child(5n)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  height: 15px;
  width: 1px;
  background: #000;
}

方法五：添加数字标签

为标尺添加数值标记。

<div class="numbered-ruler">
  <span>0</span>
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>

.numbered-ruler {
  display: flex;
  justify-content: space-between;
  width: 300px;
  padding-top: 20px;
  border-top: 1px solid #000;
  position: relative;
}

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

这些方法可以根据需要组合使用，调整颜色、尺寸和间距来创建不同风格的标尺效果。对于响应式设计，可以使用媒体查询或CSS变量来动态调整标尺的尺寸和刻度密度。