效果预览:

点击预览

HTML:
这个效果用到的HTML结构就相当的简单了,就是一个容器“div#pager”里面放了一些“a”链接标签:

<div id="pager"> 
   <a href="javascript:void(0)"><</a> 
   <a href="javascript:void(0)" class="on">1</a> 
   <a href="javascript:void(0)">2</a> 
   <a href="javascript:void(0)">3</a> 
   <a href="javascript:void(0)">4</a> 
   <a href="javascript:void(0)">5</a> 
   <a href="javascript:void(0)">6</a> 
   <a href="javascript:void(0)">></a> 
 </div>

CSS:

#pager { 
    position:relative; 
    display:block; 
    overflow:visible; 
    display:inline-block; 
    margin:300px 400px; 
} 
#pager a { 
    font:bold 20px/30px Tahoma,Arial; 
    cursor:pointer; 
    text-decoration:none; 
    color:#464646; 
    display:block; 
    float:left; 
    margin-right:1px;
box-shadow:inset rgba(0,0,0,0.1) 0 1px 0,
inset rgba(255,255,255,0.7) 0 2px 0,
inset rgba(255,255,255,0.7) 0 -1px 0,
inset rgba(255,255,255,0.7) 1px 0 0,
inset rgba(255,255,255,0.7) -1px 0 0,
rgba(0,0,0,0.3) 0 3px 0; 
    padding:2px 10px; 
    min-width:10px; 
    text-align:center; 
    position:relative; 
    text-shadow:#fff 0 1px 0; 
    background:#cdcdcd; 
    background:-webkit-gradient(linear,0% 0%,0% 100%,
from(rgba(255,255,255,0.8)),to(rgba(200,200,200,0.9))); 
    background:-webkit-linear-gradient(top,rgba(255,255,255,0.8),rgba(200,200,200,0.9)); 
    background:-moz-linear-gradient(top,rgba(255,255,255,0.8),rgba(200,200,200,0.9)); 
    background:-ms-linear-gradient(top,rgba(255,255,255,0.8),rgba(200,200,200,0.9)); 
    background:-o-linear-gradient(top,rgba(255,255,255,0.8),rgba(200,200,200,0.9)); 
} 
#pager a:after { 
    content:''; 
    position:absolute; 
    bottom:-3px; 
    height:100%; 
    display:block; 
    width:100%; 
    left:0; 
    box-shadow:inset rgba(255,255,255,0.2) 1px 0 0,
inset rgba(255,255,255,0.2) -1px 0 0,rgba(0,0,0,0.4) 0 1px 0; 
} 
#pager a:first-child::after { 
    border-radius:500px 0 0 500px; 
} 
#pager a:last-child::after { 
    border-radius:0 50px 50px 0; 
} 
#pager a.on:after { 
    bottom:-1px; 
} 
#pager a:before { 
    content:''; 
    position:absolute; 
    top:1px; 
    height:100%; 
    box-shadow:rgba(0,0,0,0.4) 0 3px 0; 
    width:1px; 
    display:block; 
    background:rgba(0,0,0,0.4); 
    right:-1px; 
} 
#pager a:last-child::before { 
    display:none !important; 
} 
#pager a:first-child { 
    border-radius:50px 0 0 50px; 
} 
#pager a:last-child { 
    border-radius:0 50px 50px 0; 
} 
#pager a:hover { 
    box-shadow:inset rgba(0,0,0,0.1) 0 1px 0,
inset rgba(255,255,255,0.7) 0 2px 0,
inset rgba(255,255,255,0.7) 0 -1px 0,
inset rgba(255,255,255,0.7) 1px 0 0,
inset rgba(255,255,255,0.7) -1px 0 0,
inset rgba(255,255,255,1) 0 0 15px,
rgba(0,0,0,0.2) 0 3px 0; 
} 
#pager a:active { 
    box-shadow:inset rgba(0,0,0,0.1) 0 1px 0,
inset rgba(0,0,0,0.3) 1px 0 0px,inset rgba(0,0,0,0.3) -1px 0 0px,
inset rgba(255,255,255,0.7) 0 2px 0,
inset rgba(255,255,255,0.7) 0 -1px 0,
inset rgba(0,0,0,0.1) 0 0 15px,rgba(0,0,0,0.2) 0 2px 0; 
    top:1px; 
    text-shadow:#fff 0 0 15px; 
} 
#pager a:active:after { 
    bottom:-2px; 
} 
#pager a:active:before { 
    box-shadow:rgba(0,0,0,0.4) 0 2px 0; 
    top:0px; 
} 
#pager a.on { 
    box-shadow:inset rgba(0,0,0,0.1) 0 1px 0,
inset rgba(0,0,0,0.3) 1px 0 0px,
inset rgba(0,0,0,0.3) -1px 0 0px,
inset rgba(255,255,255,0.7) 0 2px 0,
inset rgba(255,255,255,0.7) 0 -1px 0,
inset rgba(0,0,0,0.1) 0 0 15px,
rgba(0,0,0,0.3) 0 1px 0; 
    top:2px; 
    text-shadow:#fff 0 0 15px; 
} 
#pager a.on:before { 
    box-shadow:rgba(0,0,0,0.4) 0 3px 0; 
    top:-1px; 
} 
#pager a.on:active:after { 
    bottom:-1px; 
}

jQuery:

$(document).ready(function(){
   $("#pager a").click(function(){
      $(this).addClass("on").siblings().removeClass("on");
      });
  });

jQuery主要是用来实现“active”效果。

文章来源自:http://www.w3cplus.com 根据个人理解程度有删减。