利用html实现进度条效果的方法

html代码：

<div class="progress"  style="height: 80px;line-height: 80px;">     <span class="orange" style="width: 100%;"></span> </div>

视频学习推荐：html视频教程

css代码：

.progress {     height:10px;     background:#ebebeb;     border-left:1px solid transparent;     border-right:1px solid transparent;     border-radius:10px; } .progress > span {     position:relative;     float:left;     margin:0 -1px;     min-width:30px;     height:10px;     line-height:16px;     text-align:right;     background:#cccccc;     border:1px solid;     border-color:#bfbfbf #b3b3b3 #9e9e9e;     border-radius:10px;     background-image:-webkit-linear-gradient(top,#f0f0f0 0%,#dbdbdb 70%,#cccccc 100%);     background-image:-moz-linear-gradient(top,#f0f0f0 0%,#dbdbdb 70%,#cccccc 100%);     background-image:-o-linear-gradient(top,#f0f0f0 0%,#dbdbdb 70%,#cccccc 100%);     background-image:linear-gradient(to bottom,#f0f0f0 0%,#dbdbdb 70%,#cccccc 100%);     -webkit-box-shadow:inset 0 1px rgba(255,255,255,0.3),0 1px 2px rgba(0,0,0,0.2);     box-shadow:inset 0 1px rgba(255,255,255,0.3),0 1px 2px rgba(0,0,0,0.2); } .progress .orange {     background:#FE8E01;     border-color:#FE8E02 #FE8E02 #BF6B02;     background-image:-webkit-linear-gradient(top,#FEAA41 0%,#FE8E02 70%,#FE8E01 100%);     background-image:-moz-linear-gradient(top,#FEAA41 0%,#FE8E02 70%,#FE8E01 100%);     background-image:-o-linear-gradient(top,#FEAA41 0%,#FE8E02 70%,#FE8E01 100%);     background-image:linear-gradient(to bottom,#FEAA41 0%,#FE8E02 70%,#FE8E01 100%); }

相关推荐：html教程

以上就是利用html实现进度条效果的方法的详细内容，更多内容请关注技术你好其它相关文章！