非常好看的渐变分页样式

<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-bottom: 100px;
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;
}
.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>

 

上一篇:css3部分相关属性介绍


下一篇:etc/shadow 登陆口令破解