自定义进度条（兼容IE）

来源：互联网发布：农村淘宝网点查询编辑：程序博客网时间：2024/06/06 07:24

原因：

由于在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

查看图片附件

0 0