自定义进度条(兼容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>

猜你喜欢

转载自hbiao68.iteye.com/blog/2315416
今日推荐