CSS3实现的具有3D立体效果的数字分页代码:
3D立体效果在某些页面或者场景中，可能会更加美观，不过使用CSS3实现起来可能比较有困难，下面分享一段使用CSS3实现的此中效果，希望能够给需的朋友带来借鉴作用，代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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>
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=10927
更多内容可以参阅:http://www.softwhy.com/divcss/