这篇博客介绍了如何利用HTML的div元素和CSS来实现一个带有圆角的进度条效果。通过设置border-radius属性实现圆角，通过JavaScript动态改变div的宽度和背景色以展示进度。当进度超过50%时，进度条颜色会变为红色。
用div实现进度条，并且为圆角div
效果图：
css：
<style type="text/css">
.background_div{width: 65%;border: 1px solid lightgray;border-radius:20px; height: 10px;margin-top:2px;margin-left: 13%;}
#bar{width: 1%;display: block;background: #14C9A5;float: left;border-radius:20px;height: 100%;text-align: center;font-size: 0.6em;}
</style>
注：
最低0.47元/天 解锁文章
扫一扫
862
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
