用 CSS background 實現刻度線的呈現
摘要：
有的時候，我們需要在網頁中的進度條或某種度量計上呈現一條條的刻度線。例如這種：
簡單的實現方式，大致有兩種：一是用圖片做背景，橫向平鋪線條圖片；二是給每一塊刻度區域平鋪一個元素，然後用邊線實現。身為一個“環保主義者”，這兩種方式都不能讓我滿意。在看了 Lea Verou 的 CS...
有的時候，我們需要在網頁中的進度條或某種度量計上呈現一條條的刻度線。例如這種：
簡單的實現方式，大致有兩種：一是用圖片做背景，橫向平鋪線條圖片；二是給每一塊刻度區域平鋪一個元素，然後用邊線實現。身為一個“環保主義者”，這兩種方式都不能讓我滿意。在看了 Lea Verou 的 CSS SECRETS 後，我受到了啟發——可以用漸變背景的方式去實現。
原理很簡單。最簡單的顏色漸變是顏色 A 過渡到顏色 B，那麼，如果將顏色 A 設定成透明色，將顏色 B 設定成刻度線顏色，不就可以搞出刻度線了嗎：
div {
background: linear-gradient(to right, transparent 99px, #fff 1px);
background-size: 100px 100%;
}
在以上例子中，我用 background-size 設定刻度區間（背景）寬度為 100px，其中透明色我給它 99px 寬，線條色（白）我給它 1px 寬，這樣從透明色到線條色的漸變就會失去過渡效果，從而實現了 100px 寬的區間裡只有最後 1px 是線條——刻度線就這樣出來了。用 repeating-linear-gradient 同樣可以實現，而且不需要設定 background-size，如下所示：
div {
background: repeating-linear-gradient(
90deg,
transparent,
transparent 99px,
#fff,
#fff 100px);
}
這個樣式表示第一段漸變色從開始到 99px 都是透明色，第二段漸變色從 99px 到 100px 都是白色，之後按此設定迴圈。
詳細的程式碼可參考 ofollow,noindex">CodePen demo ，關於 linear-gradient 和 repeating-linear-gradient 的用法可參考 linear-gradient - CSS：層疊樣式表 | MDN 和 repeating-linear-gradient - CSS：層疊樣式表 | MDN 。