原因:
由于在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>