用 CSS background 实现刻度线的呈现
有的时候,我们需要在网页中的进度条或某种度量计上呈现一条条的刻度线。例如这种:
简单的实现方式,大致有两种:一是用图片做背景,横向平铺线条图片;二是给每一块刻度区域平铺一个元素,然后用边线实现。身为一个“环保主义者”,这两种方式都不能让我满意。在看了 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。
用 CSS background 实现刻度线的呈现的更多相关文章
- ArcGIS api for javascript——地图配置-滑动器的刻度线、方向、大小的改变
描述 本例展示了如果删除缩放等级滑动器的刻度线.通过设置esriConfig里的sliderLabel为null来实现: esriConfig.defaults.map.sliderLabel = n ...
- CSS 背景-CSS background
这里有个很好的样式学习网站:http://www.divcss5.com/rumen/r125.shtml 一.Css background背景语法 - TOP CSS背景基础知识 CSS 背 ...
- CSS background 属性 总结
CSS background 属性总结
- HTML CSS——background的认识(一)
今天回归bug时无意间看到了样式表中background属性,如今总结一下: 1.background-color:设置元素的背景色.其值能够为:color-name.color-rgb.color- ...
- css background之设置图片为背景技巧
css background之设置图片为背景技巧-css 背景 Background是什么意思,翻译过来有背景意思.同样在css里面作为css属性一成员同样是有背景意思,并且是设置背景图片.背景颜色. ...
- CSS background 之设置图片为背景技巧
首先先来看看background有那些值: 可以按顺序设置如下属性(可点击进入相应的css手册查看使用):background-color 背景颜色background-image 背景图片backg ...
- CSS background 属性详解
CSS background Property 语法: background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-cl ...
- Echarts实现隐藏x轴,y轴,刻度线,网格
"yAxis": [ { //就是一月份这个显示为一个线段,而不是数轴那种一个点点 "show" : true, "boundaryGap" ...
- [CSS3] CSS Background Images
Body with background image and gradient html { background: linear-gradient(#000, white) no-repeat; h ...
随机推荐
- 【Cesium 颜狗初步】fabric 材质定义与自定义着色器实践
fabric 材质定义:着色器实践 1. 示例代码 贴到沙盒里就可以运行: var viewer = new Cesium.Viewer("cesiumContainer"); v ...
- Docker(七): 安装Loki
洛基(Loki),是北欧神话中的恶作剧和谎言之神,亦是火神.他是巨人法布提(Farbauti)和女巨人劳菲(Laufey)的儿子,阿萨神族主神奥丁(Odin)的义兄弟,虽然他比奥丁要年轻许多.但他的个 ...
- ATS (apache traffic server) http_ui 设置与使用
参考官方FAQ进行设置: https://cwiki.apache.org/confluence/display/TS/FAQ#FAQ-http_ui 这里也有一篇: https://blog.zym ...
- XSS攻击与防止
1.XSS又称CSS, cross sitescript, 跨站脚本攻击,是web程序中常见的漏洞 XSS属于被动式且用于客户端的攻击方式 XSS攻击类似于SQL注入攻击,攻击之前,我们先找到一个存在 ...
- Python将word文档批量转PDF
前面有一篇<Python批量创建word文档(2)- 加图片和表格>的文章,利用这篇文章创建的word文档来批量转PDF文档.代码: 1 ''' 2 #python批量将word文档转换成 ...
- 服务器挂掉导致需要对k8s新增节点
[导读]今日是周六,本想午休起来之后写篇有关kubernetes service的文章,没想到两台虚拟机接连挂掉,所以又重新创建了两台虚拟机.新建时又一直黑屏,所以只能克隆. 由于虚拟机是新建的,所以 ...
- DX关联VS
// Windows API: #include <windows.h> // C 运行时头文件,测试可能会用到 #include <stdlib.h> //standa ...
- 运行springboot项目报错 Error running 'ResourceApplication': Command line is too long. Shorten comma
方法1 IDEA 运行报错:Error running '***': Command line is too long 技术标签: IDEA Error running 'Test': Com ...
- 进入mysql数据库修改密码
mysql -hlocalhost -uroot -p #修改密码mysql> set password for root@localhost = password('root');#启动数据库 ...
- java代理(静态代理和jdk动态代理以及cglib代理)
版权声明:本文为Fighter168原创文章,未经允许不得转载. 目录(?)[+] 说到代理,脑袋中浮现一大堆代理相关的名词,代理模式,静态代理,jdk代理,cglib代理等等. 记忆特别深刻 ...