当前位置：首页 > CSS

css制作标尺

2026-02-12 12:45:13CSS

使用CSS制作标尺的方法

通过CSS的线性渐变和伪元素可以轻松实现标尺效果。以下是几种常见的实现方式：

水平标尺实现

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

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

垂直标尺实现

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

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

带数字标记的标尺

<div class="ruler-with-numbers">
  <div class="numbers">
    <span>0</span>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
  </div>
</div>

.ruler-with-numbers {
  height: 40px;
  width: 200px;
  background: linear-gradient(to right, #000 1px, transparent 1px) 0 0;
  background-size: 50px 100%;
  border-bottom: 1px solid #000;
  position: relative;
}

.numbers {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 25px;
  box-sizing: border-box;
}

自定义标尺样式

可以通过调整以下CSS属性来自定义标尺：

background-size：控制刻度间隔
linear-gradient：控制刻度颜色和粗细
border：控制标尺边框
伪元素：添加主刻度线

.custom-ruler {
  height: 50px;
  background: 
    linear-gradient(to right, #f00 2px, transparent 2px) 0 0,
    linear-gradient(to right, #000 1px, transparent 1px) 0 0;
  background-size: 100px 100%, 10px 100%;
  border-bottom: 2px solid #333;
}

这些方法可以根据实际需求组合使用，创建出各种不同样式的标尺效果。

css制作标尺