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元素中，即可得到一個炫酷的標尺效果。