椭圆进度条

预览

HTML结构定义

如果是矩形的进度条，就不会有此步之外的烦恼了。

<div class="progress-bar dashed">
    <h3>18 GEKAUFT</h3>
    <div class="num">
        <span class="min">13</span>
        <span class="progress-bar-image">
            <span class="subject" style="width:18px;"> 18 </span>
            <span class="cover"></span>
        </span>
        <span class="max">50</span>
    </div>
    <p>Noch 41 käufer werden benötigt!</p>
</div>

如上所示，进度条的视觉长度在'span.subject'，上面直接控制CSS长度的定义。

关于

IE6对透明PNG支持不佳，在此使用了IEPNGFIX行为脚本：

    <style type="text/css">
        .progress-bar .progress-bar-image, .progress-bar .progress-bar-image span{behavior: url(css/iepngfix.htc);}  
        .progress-bar>span{behavior:none;}
    </style>
    <!--[if lt IE 7]>
	    <script type="text/javascript" src="css/iepngfix_tilebg.js"></script>
    <![endif]-->

同时,IEPNGFIX当前版本对于单张图片背景定位支持不错。但当我进展到CSS Sprite这一步时，IE6在Z轴最上面的一张，用来做遮盖的图片溢出了3个像素，解决如下：

    <style type="text/css">
    	*html .progress-bar .progress-bar-image{overflow:hidden; height:22px;}
    </style>

图片的叠加顺序：

下载(ie必须)和预览：

/Files/ambar/demos/progressbar/ProgressBar-ellipse.zip

/Files/ambar/demos/progressbar/ProgressBar-ellipse.htm

转载于:https://www.cnblogs.com/ambar/archive/2009/11/12/progressbar-ellipse.html