非常好看的渐变分页样式 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>

<div class="page wrap">
<a href="category-3.html"><span>‹‹</span></a>
<span class="now-page">1</span>
<a href="category-3_2.html"><span>2</span></a>
<a href="category-3_3.html"><span>3</span></a>
<a href="category-3_2.html"><span>›</span></a>
<a href="category-3_3.html"><span>››</span></a>
</div>

<style>
.page {
position: relative;
text-align: center;
margin-top: 50px;
}
.page a {
display: inline-block;
font-size: 16px;
margin: 0 5px;
display: inline-block;
padding: 10px 15px;
border: 1px solid #CACACA;
line-height: 18px;
text-decoration: none;
}
.page .now-page, .page a:hover {
color: #FFF;
padding: 11px 16px;
border: none;
background: -webkit-linear-gradient(66deg, #0C2B47 0%,#F43B47 100%);
background: -moz-linear-gradient(66deg, #0C2B47 0%, #F43B47 100%);
background: -ms-linear-gradient(66deg, #0C2B47 0%,#F43B47 100%);
background: -o-linear-gradient(66deg, #0C2B47 0%,#F43B47 100%);
background: linear-gradient(66deg, #0C2B47 0%,#F43B47 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#0C2B47, endColorstr=#F43B47, GradientType=1 );
-webkit-box-shadow: 0 5px 5px rgba(228,0,52,.13);
-moz-box-shadow: 0 5px 5px rgba(228,0,52,.13);
-ms-box-shadow: 0 5px 5px rgba(228,0,52,.13);
-o-box-shadow: 0 5px 5px rgba(228,0,52,.13);
box-shadow: 0 5px 5px rgba(228,0,52,.13);
}
</style>

</body>
</html>

 

posted @ 2020-07-24 15:55  绿林豪士  阅读(288)  评论(0)  编辑  收藏  举报