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> |