用纯CSS制作进度条的实例

发布时间:2020-08-22编辑:脚本学堂
进度条的使用很广泛,最常见的就是下载文件时用到,如何制作的呢?本文就介绍用css制作进度条的方法,需要的朋友参考一下。

Html代码
 

复制代码 代码示例:
1.<div style='border:1px gray solid;padding:1px;width:100px;height:14px;line-height:14px;background-color:white;font-size:12px'>
2.<div style='width:100px;text-align:center;color:green;'>四十七</div>
3.<div style='width:47px;margin-top:-14px;overflow:hidden;'>
4.<div style='width:100px;background-color:green;text-align:center;color:white;'>四十七</div></div></div>
好处
 

1 纯CSS 无图片
2 所有颜色都可更改
3 当进度条遮住字的一般的时候,仍然有良好的效果
不错的方法,学习了。