CSS3具有3D立体效果的数字分页
分类：实例代码
CSS3具有3D立体效果的数字分页属于前端实例代码，有关更多实例代码大家可以查看。
3D立体效果在某些页面或者场景中，可能会更加美观。
下面是一段使用CSS3代码实现的效果。
代码实例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
.ui-page {
border:0px;
background:#37578C;
background:-webkit-linear-gradient(#37578C, #608BAE);
background:-moz-linear-gradient(#37578C, #608BAE);
background:-ms-linear-gradient(#37578C, #608BAE);
background:-o-linear-gradient(#37578C, #608BAE);
background:linear-gradient(#37578C, #608BAE);
box-shadow:0px 4px 0px 0px #37578C;
color:#FFFFFF;
font-family:Verdana, Geneva, sans-serif;
font-weight:bold;
font-size:13px;
text-decoration:none;
vertical-align:middle;
}
.ui-page: hover {
background:#89B5D2;
color:#CCCCCC;
}
.ui-page: active{background:#1B435E;}
.ui-page-curr {
padding:2px 10px 2px 10px;
border-radius:5px 5px 5px 5px;
background:#89B5D2;
text-align:center;
}
.ui-page-prev {
padding:2px 10px 2px 15px;
border-radius:20px 10px 10px 20px;
text-align:right;
}
.ui-page-numx {
padding:2px 10px 2px 10px;
border-radius:5px 5px 5px 5px;
text-align:center;
}
.ui-page-next {
padding:2px 15px 2px 10px;
border-radius:5px 20px 20px 5px;
text-align:left;
}
</style>
</head>
<body>
<button id="cssTest" class="ui-page ui-page-prev" type="button">上一页</button>
<button id="cssTest" class="ui-page ui-page-numx" type="button">...</button>
<button id="cssTest" class="ui-page ui-page-numx" type="button">6</button>
<button id="cssTest" class="ui-page ui-page-curr" type="button">7</button>
<button id="cssTest" class="ui-page ui-page-numx" type="button">8</button>
<button id="cssTest" class="ui-page ui-page-numx" type="button">...</button>
<button id="cssTest" class="ui-page ui-page-next" type="button">下一页</button>
</body>
</html>
CSS3具有3D立体效果的数字分页，这样的场景在实际项目中还是用的比较多的，关于CSS3具有3D立体效果的数字分页就介绍到这了。