本文主要包含分页导航,CSS3属性等相关知识,佚名 希望在学习及工作中可以帮助到您
W3cplus第二版本刚上线时，好多位朋友向我问起站上的分页导航样式是怎么制作，像是图片一样。前面都是随便说了一下制作的过程，为了报答各位朋友一持对本站的大力支持，今天我特意把这个分页导航的效果当作一个小教程来说。希望大家会喜欢。
目标今天我们主要的目的是使用CSS3等相关属性来制作W3cplus站点上的分页导航效果，大家可以这点击这里查看站点上的效果，也可以直击下面的效果图：
在这个效果中，其实只有两大看点：
使用CSS3的属性，制作不规则图形效果，并且hover状态下会慢慢改变图形和字体颜色；让列表水平居中，这个效果我曾多次碰到同学问怎么使用一个列表居中显示，并且排在一行，列表还要自适应内容的宽度。看起来复杂，其实不难，这也是我下面要重点介绍的一个小技巧。
HTML Markup有想做东西，我们就需要有材料，我这里所说的材料就是我们分页导航的HTML Markup，下面我们一起来看看吧：
有了结构，就需要用CSS来美化他：
上面是DEMO效果所使用的CSS代码，下面我们一起来细看一下上面的代码：
1、不规则图形
我在此处主要使用CSS3的border-readius属性制作的不规则圆角效果：
通过第一步，我们只制作出来不规则的边界效果，需要在上面的基础上加上背景色，这样填充进行就形成了不规则的图形，类似于图片效果。这里填充颜色，使用的是CSS3的渐变属性——Gradient来实现的：