CSS的优点在于的可以随意组合HTML元素来实现许多中效果，这儿我将使用CSS来实现一个运行进度条，效果如下：
思路是用两个div来作为进度条外观，表示进度的div和外面div宽度和高度保持一致，并是外面的div的overflow为hidden，这样就可以省去内部div超出的部分，然后通过控制内部div的margin-top属性来控制进度条的进度，这些可以在js中来实现。做法还算简单，下面是html和css文件内容：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Css Demo</title>
<link rel="stylesheet" href="style.css" />
<script>
function setProgressValue(id, val)
{
var progress = document.getElementById(id);
var masker = progress.getElementsByClassName('progress_masker');
var value = progress.getElementsByClassName('progress_value');
if(masker.length>0)
{
masker[0].style.marginTop = "" + val + "%";
}
if(value.length>0)
{
value[0].innerHTML = "" + (100 - val) + "%";
}
}
</script>
</head>
<body onLoad="setProgressValue('progress', 20);">
<div id="content">
<div id="progress">
<div class="progress_value"></div>
<div class="progress_outer">
<div class="progress_inner">
<div class="progress_masker">
</div>
</div>
</div>
<div>
</div>
</body>
</html>
#progress
{
width:200px;
height:200px;
padding:;
}
.progress_outer
{
height:100%;
width:100%;
background-color:gray;
border-radius:calc(100%/2);
border:5px solid black;
padding:; box-shadow: 0px 2px 4px #555555;
-webkit-box-shadow: 0px 2px 4px #555555;
-moz-box-shadow: 0px 2px 4px #555555;
} .progress_inner
{
height:100%;
width:100%;
border:1px solid yellow;
border-radius:calc(100%/2);
position:relative;
background-color:white;
overflow:hidden;
text-align:center; } .progress_masker
{
height:100%;
width:100%;
background: -webkit-gradient(linear,center top,center bottom,from(#0ff), to(#0f0));
background: -moz-linear-gradient( top,#fff,#0f0);
background: -o-linear-gradient( top,#fff,#0f0)
} .progress_value
{
width:100%;
color:black;
font-weight:bolder;
background-color:transparent;
text-align:center;
}
因为在css中采用了相对布局，所以要更改进度条的大小只用更改最外层的div的宽度和高度，在这儿就是id为progress的div。