用 CSS background 实现刻度线的呈现

时间: 2018-11-21阅读: 1408标签: css

有的时候,我们需要在网页中的进度条或某种度量计上呈现一条条的刻度线。例如这种:


简单的实现方式,大致有两种:一是用图片做背景,横向平铺线条图片;二是给每一块刻度区域平铺一个元素,然后用边线实现。身为一个“环保主义者”,这两种方式都不能让我满意。在看了 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 都是白色,之后按此设定循环。

详细的代码可参考 CodePen demo,关于 linear-gradient 和 repeating-linear-gradient 的用法可参考 linear-gradient - CSS:层叠样式表 | MDN 和 repeating-linear-gradient - CSS:层叠样式表 | MDN



站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/1385

如何写出一套可维护的CSS库?

如何写出一套可维护的CSS库?不妨谈谈CSS的设计模式/架构吧。接下来将为你讲述三个主流的CSS设计思想和一个最近通用的CSS设计思想:OOCSS、SMACSS、BEMCSS、METACSS。

什么是css sprites(雪碧图),css sprites使用的优缺点

css sprites雪碧图:把一堆小图片整合在一张大图上,通过背景图片相关设置(背景图片、背景图是否重复、背景图定位),显示图片,减轻服务器对图片的请求数量

20条书写CSS代码

在这篇文章中,我想跟你分享 20 条由 CSS 社区推荐的约定和最佳实践。 有些建议可能比较适合新手,而有些则更高级一些,但我希望每个人都可以在本篇文章中收获自己不知道的知识。

CSS属性书写顺序

生活中衡量一个人有气质:穿着打扮举止言行等等,编程中如何衡量一个人的代码能力?规范标准优雅高质量等等一个词形容专业从代码中看出是否有经验..

CSS三大特性:层叠 继承 优先级

如果一个属性通过两个相同选择器设置到同一个元素上,相同的属性就会出现冲突,那么这个时候一个属性就会将另一个属性层叠掉,采用的是就近原则

能用HTML/CSS解决的问题就不要使用JS

为什么说能使用html/css解决的问题就不要使用JS呢?两个字,因为简单。简单就意味着更快的开发速度,更小的维护成本,同时往往具有更好的体验,下面介绍几个实例。

组织和管理CSS

在项目开发的过程中,基于有限的时间内保质保量的完成开发任务无疑是一场挑战。在这场挑战中我们不但要快速处理自己的问题,还需要与别人协同合作,以避免两者之间的冲突。

如何通过CSS向JS传参?

CSS中有很多媒体查询的用法,例如设备尺寸判别,是否支持鼠标行为,是否是黑暗模式,是否是省电模式等。CSS可以自动检测,但是有时候,在JS中,我们也需要根据不同的系统主题,然后实现不同的交互逻辑,或者渲染出不一样的内容。

深入理解letter-spacing,word-spacing的对比区别

word-spacing 属性增加或减少单词间的空白(即字间隔)。 letter-spacing 属性增加或减少字符间的空白(字符间距)。

作为Web开发人员应避免的10种CSS做法!

有人认为CSS很难学习,没有什么逻辑可言,而且还坑很多,可能是大家对CSS还不是很了解,因为我提出了五个我不喜欢的开发者习惯,并向大家展示如何避免它们。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!