用 CSS background 实现刻度线的呈现

有的时候，我们需要在网页中的进度条或某种度量计上呈现一条条的刻度线。例如这种： 简单的实现方式，大致有两种：一是用图片做背景，横向平铺线条图片；二是给每一块刻度区域平铺一个元素，然后用边线实现。身为一个“环保主义者”，这两种方式都不能让我满意。在看了 Lea Verou 的 CSS SECRETS 后，我受到了启发——可以用渐变背景的方式去实现。 原理很简单。最简单的颜色渐变是颜色 A 过渡到颜色 B，那么，如果将颜色 A 设置成透明色，将颜色 B 设置成刻度线颜色，不就可以搞出刻度线了吗： div { background: linear-gradient(to right, tra