CSS3写标尺非常简单，可以让网页看起来更加炫酷美观。下面，我们就来学习一下CSS3如何制作标尺。

.ruler {
width: 100%;
height: 50px;
background-color: #F7F7F7;
display: flex;
justify-content: space-between;
padding: 0 10px;
}
.ruler span {
position: relative;
bottom: 0;
font-size: 12px;
line-height: 50px;
color: #999;
}
.ruler span:before {
position: absolute;
content: '';
width: 1px;
height: 20px;
bottom: 0;
left: 50%;
transform: translateX(-50%);
background-color: #CCC;
}
.ruler span:nth-child(10):before {
height: 30px;
}
.ruler span:nth-child(5):before {
height: 40px;
}

以上是CSS3代码片段，我们可以看到，首先定义了一个包含标尺的容器，其width为100%，height为50px，背景色为#F7F7F7，采用了display:flex，justify-content:space-between的布局方式，以保证每个标尺之间的距离相等。

接着，定义了标尺的样式，采用了相对定位，字体大小为12px，颜色为#999，通过:before伪元素实现了底部的横线，高度分别为20px、30px和40px。

最后将标尺样式应用到HTML元素中，即可得到一个炫酷的标尺效果。