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

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

總結

以上所述是小編給大家介紹的用 CSS background 實現刻度線的呈現，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！