html背景渐变效果
文章描述：
css设置背景颜色渐变效果
<div class="container">
<div>
<h2>左右渐变色</h2>
<a class="more">了解更多</a>
</div>
<div>
<h2>上下渐变色</h2>
<a class="ck">点击按钮</a>
</div>
</div>.more{
width:160px;
height:44px;
display:block;
border-radius:22px;
font-size:18px;
text-align:center;
color:#fff !important;
line-height:44px;
box-shadow: 0 6px 8px 0 rgba(0,0,0,.2);
transition: all .3s ease;
background: -webkit-linear-gradient(left, #6260ff , #8633ff); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, #6260ff, #8633ff); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, #6260ff, #8633ff); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, #6260ff , #8633ff); /* 标准的语法 */
}
.more:hover{
background: linear-gradient(90deg, #ae63fa, #5e92fd);
box-shadow: 0 3px 8px 0 rgba(0,0,0,.1);
}
.ck{
width:160px;
height:40px;
border:1px #D4D4D4 solid;
box-shadow:0 -1px 10px rgba(0,0,0,0.1); border-radius:22px ;
display: block; text-align: center; font-size:18px; color:#fff !important; line-height:40px;
background:-webkit-linear-gradient(top,#FFF,#F2F2F2);
background:-o-linear-gradient(top,#FFF,#F2F2F2);
background:-ms-linear-gradient(top,#FFF,#F2F2F2);
background:linear-gradient(to bottom,#ff5808,#efe923);
background-repeat: repeat-x;
}
发布时间：2022/10/13
发表评论