有的時(shí)候，我們需要在網(wǎng)頁中的進(jìn)度條或某種度量計(jì)上呈現(xiàn)一條條的刻度線。例如這種：

簡單的實(shí)現(xiàn)方式，大致有兩種：一是用圖片做背景，橫向平鋪線條圖片；二是給每一塊刻度區(qū)域平鋪一個(gè)元素，然后用邊線實(shí)現(xiàn)。身為一個(gè)“環(huán)保主義者”，這兩種方式都不能讓我滿意。在看了 Lea Verou 的 CSS SECRETS 后，我受到了啟發(fā)——可以用漸變背景的方式去實(shí)現(xiàn)。

原理很簡單。最簡單的顏色漸變是顏色 A 過渡到顏色 B，那么，如果將顏色 A 設(shè)置成透明色，將顏色 B 設(shè)置成刻度線顏色，不就可以搞出刻度線了嗎：

div {
  background: linear-gradient(to right, transparent 99px, #fff 1px);
  background-size: 100px 100%;
}

在以上例子中，我用 background-size 設(shè)定刻度區(qū)間（背景）寬度為 100px，其中透明色我給它 99px 寬，線條色（白）我給它 1px 寬，這樣從透明色到線條色的漸變就會(huì)失去過渡效果，從而實(shí)現(xiàn)了 100px 寬的區(qū)間里只有最后 1px 是線條——刻度線就這樣出來了。用 repeating-linear-gradient 同樣可以實(shí)現(xiàn)，而且不需要設(shè)置 background-size，如下所示：

div {
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 99px,
    #fff,
    #fff 100px);
}

這個(gè)樣式表示第一段漸變色從開始到 99px 都是透明色，第二段漸變色從 99px 到 100px 都是白色，之后按此設(shè)定循環(huán)。

總結(jié)

以上所述是小編給大家介紹的用 CSS background 實(shí)現(xiàn)刻度線的呈現(xiàn)，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論