-o-transition: all 0.5s ease-in 0s;
transition: all 0.5s ease-in 0s;
}
请注意，我们的效果是在“a:hover”状态下发生的，所以大家会以为动画效果是加载在“a:hover”上，其实不是的，我需要在“a”上设置一个“transition”属性，当在“a:hover”状态下，元素样式参数值改变时，就会给我们带一个动画效果一样。具体的使用方法大家可以参阅《CSS3 Transition 》。当然大家如果成使用更好的动画效果，你可以使用CSS3的Animation来作。感兴趣的话可以参考animate.css和animatable.css。
4、当前项效果
因为我们当前项是没有放在“a”标签中的，为了让其和其他项样式一样，我们需要把当前项的样式和“a”链接的样式设置成一样，不同之处是，他的效果类似于“a:hover”效果：
复制代码
.pager li.pager-current,
.pager li a {
-moz-border-radius: 70px 20px 38px 20px / 20px 30px 10px 10px;
-webkit-border-radius: 70px 20px 38px 20px / 20px 30px 10px 10px;
border-radius: 70px 20px 38px 20px / 20px 30px 10px 10px;
background: #232B30; /* old browsers */
background: -moz-linear-gradient(top, #3D4850 3%, #313d45 4%, #232B30 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#3D4850), color-stop(4%,#313d45), color-stop(100%,#232B30)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#3D4850′, endColorstr=’#232B30′,GradientType=0 ); /* ie */
-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Firefox */
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Safari, Chrome */
box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* CSS3 */
color: #FFFFFF;
font-size: 12px;
margin-left: 10px;
padding: 3px 12px;
-webkit-transition: all 0.5s ease-in 0s;
-moz-transition: all 0.5s ease-in 0s;
-o-transition: all 0.5s ease-in 0s;
transition: all 0.5s ease-in 0s;
text-decoration: none;
zoom:1;
}
.pager li.pager-current {
-moz-border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
-webkit-border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;
color: #d54e21;
font-weight: bold;
}
5、列表居中
这一点是我今天要特别提出来的一点，大家都知道，我们列表项要放置在一行显示，需要使用“float”来实现，但是使用了浮动后，我们就无法让整个分页导航水平居中，如此一来就会给我们带来一个两难境地。那么今天我在这里给大家展示另外一种处理方法：“display:inline-block”来让列表项显示在一行，大爱看到这个肯定又说难了，因为其在IE6-7下是无法支持的。这一点大家说的一点不错，其实我们只需要在IE下稍作处理就ＯＫ了，我们具体来看一下如何实现其水平居中：
