http://hikola.com/?p=259
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>css3_progress_bar</title>
<style type="text/css">
*{margin:0;padding:0;}
body{background-color:#23272d;}
.wrap{margin:200px auto;width:404px;}
.progress_bar{padding:2px;width:400px;height:20px;background-color:#191d21;overflow:hidden;border-radius:12px;box-shadow:inset 0 1px 1px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.1);}
.bar{height:20px;background-color:#7cb935;
border-radius:10px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 10px 15px rgba(255,255,255,.3);
background-size:40px 40px;
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);
background-image: -webkit-gradient(linear, 0 0, 100% 100%,
color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),
color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),
color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),
to(transparent));
background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);
}
.percentage{margin-bottom:5px;height:24px;font:12px/24px Georgia,simsun,sans-serif;text-align:center;color:#fff;text-shadow: rgba(0,0,0,1) 0 -1px 1px;}
</style>
</head>
<body>
<div class="wrap">
<p class="percentage">36%</p>
<div class="progress_bar"><div class="bar" style="width:36%"></div></div>
</div>
</body>
</html> |
