自定义进度条（兼容IE）

原因：

由于在CSS3之前是没有办法做到“圆角的”，所以两端的圆角要使用图片，然后中间部分使用div的百分比背景作为进度。

 

解决办法：

自己写了一个小的demo，方便自己在做PCweb的时候使用。

 

代码如下

<div class="width_200px absolute " style="top:33%;left: 300px">

<div class="relative " style="padding-left: 5px;padding-right: 5px;">
<div class="absolute" style="top:-7px;left: 1px;">
<img src="iamges/progressBarRadius_03.png">
</div>
<div class="absolute" style="top:-7px;right: 1px;">
<img src="iamges/progressBarRadius_05.png">
</div>
<!-- 背景为#dedede的进度条 -->
<div class="bg_49a154 all_width" style="height: 8px;background-color: #dedede;"></div>
<!-- 背景为#dedede的进度条 -->
<div class="absolute all_width" style="top:5px;left: 0px;padding-left: 5px;padding-right: 5px;">
<div class="bg_49a154 all_width relative" style="height: 8px;width:33%;top:-5px;">
</div>
</div>
</div>

</div>

 



 

 





大小: 566 Bytes
查看图片附件