清华大佬耗费三个月吐血整理的几百G的资源，免费分享！....>>>

*{margin:0; padding:0;}
body{background-color: #E2E2E2;}
 
/** 整个菜单的宽度为50% 可以更具自己需求改 border-radius:100%; 矩形就变成圆形了 **/
.round-nav{width:50%; background:#ddd; margin: 20px auto;border-radius: 100%; 
    position: relative; z-index: 990;border:solid 2px #ccc;
    box-shadow: 0px 0px 110px rgba(180, 180, 180, 0.3) inset,0px 0px 5px #D3D3D3;}
/** 高度 := 宽度 **/
.round-nav:before{content:""; padding-top:100%; display: block;}
 
.round-nav-item{width:50%; height: 50%; position: absolute; text-align: center; line-height: 50%; display: block;
    color:#c2c2c2; text-shadow:0px 1px 3px #fff; font:14pt Microsoft YaHei; letter-spacing: 1px;}
.round-nav-item:hover{background-color:#8BFF7C;color: #2BC917;text-shadow: 0px 0px 3px #FFFFFF;}
 
.round-nav-item span{
    width:100%; height: 100%;
}
 
/** 将原始设置成box容器，方便水平，垂直居中 **/
.round-nav-item span,.setBox{
    display: -webkit-box;-webkit-box-orient: horizontal;-webkit-box-pack: center;-webkit-box-align: center;
    display: -moz-box;-moz-box-orient: horizontal;-moz-box-pack: center;-moz-box-align: center;
    display: -o-box;-o-box-orient: horizontal;-o-box-pack: center;-o-box-align: center;
    display: -ms-box;-ms-box-orient: horizontal;-ms-box-pack: center;-ms-box-align: center;
}
 
/** 在圆形中设置4个宽高都为50%的容器分别对应圆形的上左上右下左下右,然后画对应的圆角 **/
/** 容器里面的span是用来存放文章 + 角度倾斜用的 **/
.top-left{left: 0px; top:0px; border-top-left-radius:100%; border-right: solid 1px #ccc; }
.top-left span{-webkit-transform:rotate(-50deg)}
 
.top-right{left:50%; top:0px; border-top-right-radius:100%; border-bottom: solid 1px #ccc;}
.top-right span{-webkit-transform:rotate(50deg)}
 
.bottom-left{left: 0px; top: 50%; border-bottom-left-radius:100%; border-top: solid 1px #ccc;}
.bottom-left span{-webkit-transform:rotate(50deg)}
 
.bottom-right{left: 50%; top: 50%;border-bottom-right-radius:100%; border-left: solid 1px #ccc;}
.bottom-right span{-webkit-transform:rotate(-50deg)}
 
.round-centerBtn,.round-centerBtn:before{width:50%; height: 50%; border-radius: 100%; background:#dfdfdf; position: absolute;
    left:25%; top:25%;z-index:991; border:solid 2px #74B96B; box-shadow: 0px 0px 3px #fff;
    font:18pt consolas;color: #bbb;text-shadow: 0px 1px 1px #555;}
.round-centerBtn:before{content:""; background-color:rgba(0, 255, 0, 0.5); display: block; z-index: 992; 
    width: 100%; height: 100%; left:0px; top:0px;box-shadow:0px 0px 10px #82AF69 inset; border:none;}
 
/* 基本就这些东西，那些颜色可以用Google Chrome “审查元素” 功能慢慢调 */