用CSSbackground实现刻度线的呈现
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
⽤CSSbackground实现刻度线的呈现
有的时候，我们需要在⽹页中的进度条或某种度量计上呈现⼀条条的刻度线。
例如这种：
简单的实现⽅式，⼤致有两种：⼀是⽤图⽚做背景，横向平铺线条图⽚；⼆是给每⼀块刻度区域平铺⼀个元素，然后⽤边线实现。
⾝为⼀
个“环保主义者”，这两种⽅式都不能让我满意。
在看了 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 都是⽩⾊，之后按此设定循环。
详细的代码可参考，关于 linear-gradient 和 repeating-linear-gradient 的⽤法可参考和。