通过纯css实现圆角的步骤流程效果，扩展性强，可以随意增加减少数量，兼容性ie6+。
具体代码：
1 <style type="text/css"> 2 ul{margin:0px; padding:0px; list-style:none;} 3 .wrap{width:960px; height:auto; line-height:30px; margin:100px auto 0;} 4 .step-case{height:40px;} 5 .step-case li{ float:left; margin:0px; width:12.5%;position:relative; cursor:pointer;} 6 .step-case li span{display:block; background-color:#ccc; height:40px; line-height:40px; text-align:center; color:#fff; font-weight:bold;} 7 .step-case b{position:absolute; font-size:0px; line-height:0px; top:0px;} 8 .step-case .b-l{border-width:2px 2px 2px 0; border-style:dashed solid dashed dashed; border-color:transparent #ccc transparent transparent; height:36px; left:-2px;} 9 .step-case .b-r{border-width:2px 0 2px 2px; border-style:dashed dashed dashed solid; border-color:transparent transparent transparent #ccc; height:36px; right:-2px;} 10 .step-case .b-1{border-width:20px 0 20px 20px; border-style:solid dashed solid solid; border-color:#ccc transparent #ccc #ddd; left:-20px;} 11 .step-case .b-2{border-width:20px 0 20px 20px; border-style:dashed dashed dashed solid; border-color:transparent transparent transparent #ccc; left:-21px;} 12 /*当前状态*/ 13 .step-case .s-cur span{background-color:orange;} 14 .step-case .s-cur .b-l{border-right-color:orange;} 15 .step-case .s-cur .b-r{border-left-color:orange;} 16 .step-case .s-cur .b-1{border-color:orange orange orange #FABF55;} 17 .step-case .s-cur .b-2{border-left-color:#FADBA5;} 18 /*当前状态后*/ 19 .step-case .s-cur-next .b-2{border-color:transparent transparent transparent orange;} 20 /*完成的状态*/ 21 .step-case .s-finish span{background-color:#FADBA5; color:#000;} 22 .step-case .s-finish .b-l{border-right-color:#FADBA5;} 23 .step-case .s-finish .b-r{border-left-color:#FADBA5;} 24 .step-case .s-finish .b-1{border-color:#FADBA5 #FADBA5 #FADBA5 #FABF55;} 25 .step-case .s-finish .b-2{border-left-color:#FADBA5;} 26 </style> 27 <script type="text/javascript"> 28 window.onload = function(){ 29 var step = document.getElementById("step"),li = step.getElementsByTagName("li"); 30 for(var i = 0;i<li.length;i++){ 31 //(function(i){ 32 li[i].index = i; 33 li[i].onclick = function(){ 34 var i = this.index; 35 for(var j = 0;j<i;j++){ 36 li[j].className = "s-finish"; 37 } 38 for(var j = li.length;j>i;){ 39 li[--j].className = ""; 40 if(j==i+1){ 41 li[j].className = "s-cur-next"; 42 } 43 } 44 this.className = "s-cur"; 45 } 46 47 //})(i); 48 } 49 }; 50 </script> 51 <div class="wrap"> 52 <ul class="step-case" id="step"> 53 <li class="s-finish"><span>第1步</span><b class="b-l"></b></li> 54 <li class="s-finish"><span>第2步</span><b class="b-1"></b><b class="b-2"></b></li> 55 <li class="s-finish"><span>第3步</span><b class="b-1"></b><b class="b-2"></b></li> 56 <li class="s-finish"><span>第4步</span><b class="b-1"></b><b class="b-2"></b></li> 57 <li class="s-cur"><span>第5步</span><b class="b-1"></b><b class="b-2"></b></li> 58 <li class="s-cur-next"><span>第6步</span><b class="b-1"></b><b class="b-2"></b></li> 59 <li><span>第7步</span><b class="b-1"></b><b class="b-2"></b></li> 60 <li><span>第8步</span><b class="b-1"></b><b class="b-2"></b><b class="b-r"></b></li> 61 </ul> 62 </div>