用 CSS background 實現刻度線的呈現

　　有的時候，咱們須要在網頁中的進度條或某種度量計上呈現一條條的刻度線。例如這種：

簡單的實現方式，大體有兩種：一是用圖片作背景，橫向平鋪線條圖片；二是給每一塊刻度區域平鋪一個元素，而後用邊線實現。身爲一個「環保主義者」，這兩種方式都不能讓我滿意。在看了 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 都是白色，以後按此設定循環。

　　詳細的代碼可參考 CodePen demo，關於 linear-gradient 和 repeating-linear-gradient 的用法可參考 linear-gradient - CSS：層疊樣式表 | MDN 和 repeating-linear-gradient - CSS：層疊樣式表 | MDN。