CSS是一種用于網頁設計的語言，可以通過樣式來美化頁面的外觀和布局。其中刻度尺樣式是一種常見的設計元素，下面我們來看一下如何用CSS來制作刻度尺樣式。

.mark {
display: flex;
justify-content: space-between;
align-items: center;
height: 40px;
margin: 10px;
border: 1px solid #000;
position: relative;
text-align: center;
}
.mark:before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 20px;
border-right: 1px solid #000;
}
.mark:after {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 20px;
border-left: 1px solid #000;
}
.mark span {
width: 20px;
position: relative;
z-index: 2;
}
.mark span:before {
content: "";
display: block;
position: absolute;
top: 10px;
left: -5px;
width: 10px;
height: 1px;
background: #000;
}
.mark:last-child span:before {
display: none;
}

上面的代碼是刻度尺樣式的CSS代碼，首先是.mark類來定義樣式以及它的子元素的樣式。在.mark類中，我們使用了flex布局來讓子元素水平排列并居中對齊。.mark:before和.mark:after對應于左右兩個邊框，它們的寬度和顏色一樣。接下來是.mark span，這個類用來定義每個刻度線的樣式，每個刻度線都包括一個白色的方塊和一條豎線。最后，.mark:last-child span:before定義了最后一個刻度線的樣式，因為最后一個不需要顯示豎線。

總的來說，刻度尺樣式可以讓網頁更美觀，也更好用。在實際開發中，我們可以根據需求，適當地修改和調整這個樣式，來滿足不同的設計要求。