CSS百分比进度条设计方法

CSS百分比进度条设计方法

如今在制作网页中我们常常会使用css样式来设计页面效果，今天为大家介绍一下CSS百分比进度条设计方法。效果图：代码：style#graphbox{border:1px solid #e7e7e7;padding:10px;width:250px;background-color:#f8f8f8;margin:5px 0;}#graphbox h2{color:#666666;font-family:Arial;font-size:18px;font-weight:700;}.graph{position:relative;background-color:#F0EFEF;border:1px solid #cccccc;padding:2px;font-size:13px;font-weight:700;}.graph .orange, .green, .blue, .red, .black{position:relative;text-align:left;color:#ffffff;height:18px;line-height:18px;font-family:Arial;display:block;}.graph .orange{background-color:#ff6600;}.graph .green{background-color:#66CC33;}.graph .blue{background-color:#3399CC;}.graph .red{background-color:red;}.graph .black{background-color:#555;}/stylediv id="graphbox"h2BarGraphs Example/h2div class="graph"span class="orange" style="width:35%;"orange:35%/span/divdiv class="graph"span class="green" style="width:90%;"green:90%/span/divdiv class="graph"span class="blue" style="width:75%;"blue:75%/span/divdiv class="graph"span class="red" style="width:85%;"red:85%/span/divdiv class="graph"span class="black" style="width:100%;"black:100%/span/div/div2023-04-28