CSS3+font字体文件实现圆形菜单三度空间

在平常项目中，偶尔也会涉及一些前端的设计，但毕竟不是专业的，所以一直想要系统的学习一下。最近辞职了，等待入职新公司的期间，有空折腾学习一些CSS3的知识。

今天就从一个简单的圆形菜单的实现，来总结一些最近学习的收获。效果图如下：

下面，就来看看这个圆形半透明的菜单如何实现：

1.我们使用一个ul来制作菜单，代码如下：

2.为ul添加样式（ulMenu）以及其下的li，a，span，美化一下菜单:

1.ulMenu{2list-style:none;3}4.ulMenuli{5float:left;6height:80px;7width:80px;8padding:0;9margin:0;10text-align:center;11list-style:none;12margin:10px10px00;13}14.ulMenulia{15display:block;16height:100%;17padding:015px;18font-size:12px;19font-weight:bold;20color:#ccc;21text-decoration:none;22}23.ulMenuliaspan{24display:block;25}效果如下：

3.如何让菜单变成圆的，其实只要先将元素设置为长宽相等的正方形，再设置圆角为其长度的一半即可，例如，此例子中，li的长宽是80px,则我们设置其圆角为40px，我们将li的样式改为如下，增加圆角和背景色：

1.ulMenuli2{3float:left;4height:80px;5width:80px;6padding:0;7margin:0;8text-align:center;9list-style:none;10background:rgba(0,0,0,0.3);11border-radius:40px;12-moz-border-radius:40px;13-webkit-border-radius:40px;14margin:10px10px00;15}效果如下：

4.这样离我们要的效果还有些差距，我们要加一些图标上去。CSS3的可以引入font字体可以让我们省去找图标的麻烦，我们可以直接引入font字体文件，这个下一步再详细说，这里，我们先改动一下菜单的html代码，用个容器来显示图标，这里我们用i元素，改动后代码如下:

1.ulMenuliai2{3display:inline-block;4width:24px;5height:24px;6margin-top:17px;7margin-bottom:.25em;8font-size:28px;9}效果如下：

下载font字体，在样式文件中引用：

1@font-face{2font-family:'FontAwesome';3src:url('font/fontawesome-webfont.eot');4src:url('font/fontawesome-webfont.eot#iefix')format('embedded-opentype'),5url('font/fontawesome-webfont.woff')format('woff'),6url('font/fontawesome-webfont.ttf')format('truetype'),7url('font/fontawesome-webfont.svgz#FontAwesomeRegular')format('svg'),8url('font/fontawesome-webfont.svg#FontAwesomeRegular')format('svg');9font-weight:normal;10font-style:normal;11}6.接着，我们可以用下面形似的样式来制定图标：

1.css:before{2content:"\f001";3}但是图标很多，我们可以直接引入下载的font文件下面css文件夹下的font-awesome.css样式文件，也就是说，上面的一大堆字体文件引用都可以省略为（当然，真实开发中考虑到模块化引入css加载性能略影响，个人觉得应少用，希望有经验的前辈赐教）：

1@importurl('font-awesome.css');为i添加对应css：

7.最后一步，添加鼠标移动上去时改变颜色，添加如下样式：

1.ulMenulia:hover{2color:#F90;3}效果如下：

本人初学CSS3，有很多写的不完善或错误的地方，请不吝指出和见谅，谢谢。