漏刻有时数据大屏CSS样式表成长教程(3)：使用样式表做圆环指示图标

漏刻有时数据大屏CSS样式表成长教程(3)：使用样式表做圆环指示图标

核心样式表

.dot1 { display: inline-block; width: 10px; height: 10px; border: 2px solid #FF4145; border-radius: 50%; background: transparent; margin-left: 10px; margin-right: 5px;}.dot2 { display: inline-block; width: 10px; height: 10px; border: 2px solid #FF8D00; border-radius: 50%; background: transparent; margin-left: 10px; margin-right: 5px;}.dot3 { display: inline-block; width: 10px; height: 10px; border: 2px solid #FDFF00; border-radius: 50%; background: transparent; margin-left: 10px; margin-right: 5px;}

代码分析

border-radius: 50%; border: 2px solid #FF4145; background: transparent;

将block块通过border-radius: 50%转为圆;设置圆的边框border: 2px solid #FF4145;background: transparent背景色为透明;

@lockdata.cn

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。