椭圆形进度条不用图片 (js)

设置border-radius吧，IE9以上及其它大多浏览器支持
你这只是利用火狐hr元素的奇怪特性实现的

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

如果不考虑浏览器的兼容性，那么用html5的border-radius属性就能实现圆角；
如果要兼顾ie低版本系列，那么最简洁的就是用背景圆角的图片，而且这类图片gif格式就可以了，1K左右的大小；
当然了，如果你执意要用代码去实现，且又要兼顾ie浏览器，那么用N个div的css border属性堆叠成圆角效果，但是代码太繁杂啦！
请你取舍以上方法！
去下载现成的插件吧。
非得自己做，CSS很难都兼容，要不用图片。
ie8及以下用vml
ie9以上及firefox等用css3寫
不知道是不是你想要的<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS+JS打造漂亮进度条代码</title>
<style type=text/css>
.progressbar{
width:216px;
height:41px;
background:url(http://www.update8.com/js_img/10-20/images/x2.gif) no-repeat 0 0;
position:relative;
}
.progressbar  span{
position:absolute;
width:200px;
height:25px;
background:url(http://www.update8.com/js_img/10-20/images/x3.gif) no-repeat 0 0;
top:8px;
left:8px;
text-align:left;
vertical-align:middle;
line-height:25px;
overflow:hidden;
color:#fff;
}
.progressbar em{
position:absolute;
display:block;
background:url(http://www.update8.com/js_img/10-20/images/x1.gif) repeat-x;
width:200px;
height:25px;
left:0%;
z-index:1000;
top:0px;
}
</style>
</head>
<body>
<div class=progressbar id="div_contianer"> <span>100%<em style="left:100%"></em></span> </div>
<script type="text/javascript">
var bar = document.getElementsByTagName("em")[0];
for(var i=0;i<=100;i++){
(function(){
var pos=i;
setTimeout(function(){
bar.style.left =pos+"%";
bar.parentNode.firstChild.nodeValue = pos+"%";
},pos*50)
})()
}
</script>
</body>
</html>
<style>
#d{width:300px;height:10px;border:solid 1px red;border-radius:5px;}
#d #inner{width:20%;background:blue;height:10px}
</style>
<div id=d><div id=inner></div></div>

椭圆形进度条 不用图片 (js)

解决方案 »

椭圆形进度条不用图片 (js)