用 CSS background 完成刻度线的展现

日期:2021-03-17 类型:科技新闻 

关键词:怎么把小程序变成二维码,微信小程序怎么开通,微信小程序csdn,小程序开发,网络答题小程序

有的情况下,大家必须在网页页面中的进度条或某种衡量计上展现1条条的刻度线。比如这类:

简易的完成方法,大概有两种:1是用照片做情况,横向平铺线条照片;2是给每块刻度地区平铺1个元素,随后用边线完成。身为1个“环保现实主义者”,这两种方法都不可以让我令人满意。在看了 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);
}

这个款式表明第1段渐变色色从刚开始到 99px 全是全透明色,第2段渐变色色从 99px 到 100px 全是白色,以后按此设置循环系统。

总结

以上所述是网编给大伙儿详细介绍的用 CSS background 完成刻度线的展现,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!