background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#4C5A64), color-stop(4%,#404F5A), color-stop(100%,#2E3940)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#4C5A64′, endColorstr=’#2E3940′,GradientType=0 ); /* ie */
color: #d54e21;
}
上面是DEMO效果所使用的CSS代码，下面我们一起来细看一下上面的代码：
1、不规则图形
我在此处主要使用CSS3的border-readius属性制作的不规则圆角效果：
复制代码
.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;
}
有关于其详细介绍，大家可以点击《CSS3的圆角Border-radius》。上面是默认状态下的效果，那么在hover下改变图形样式，我想大家都想到了，是的那就是在“:hover”下改变其风格：
复制代码
.pager li a:hover {
-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;
}
2、背景色
通过第一步，我们只制作出来不规则的边界效果，需要在上面的基础上加上背景色，这样填充进行就形成了不规则的图形，类似于图片效果。这里填充颜色，使用的是CSS3的渐变属性——Gradient来实现的：
复制代码
.pager li a {
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 */
}
.pager li a:hover {
background: #4C5A64; /* old browsers */
background: -moz-linear-gradient(top, #4C5A64 3%, #404F5A 4%, #2E3940 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#4C5A64), color-stop(4%,#404F5A), color-stop(100%,#2E3940)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#4C5A64′, endColorstr=’#2E3940′,GradientType=0); /* ie */
color: #d54e21;
}
3、动画效果
上面完成的只是一个静态的CSS3样式效果，但我们上面的DEMO中是有一个动态改变背景的效果，这个效果我主要使用了CSS3的transition属性：
复制代码
.pager li a {
-webkit-transition: all 0.5s ease-in 0s;
-moz-transition: all 0.5s ease-in 0s;
