渐变

本文主要是介绍渐变，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

字体渐变

• 代码：

/*方法1
 left top, right bottom
 x1    y1,  x2    y2   
*/
.txt1{
    color:#ac5d9a;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: -webkit-gradient(linear, left top, right bottom, from(#ac5d9a), to(#fbf409));
}
/*方法2*/
.txt2{
    color:#ac5d9a;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-image:-webkit-linear-gradient(left,#ac5d9a, #fbf409);
}
/*方法3*/
/*linear-gradient(to right, #ac5d9a, #fbf409);-----ie10-11下 ,会有渐变的背景色*/
.txt3{
    color:#ac5d9a;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right, #ac5d9a, #fbf409);
}
/*方法4：
要点在于:
1、设置元素和:after元素设置两个不同的color；
2、mask:颜色中通过设置不同透明度来实现渐变*/
.txt4{
    position: relative;
    color: #fbf409;
}
.txt4:after{
    content: attr(data-txt);
    display: block;
    position: absolute;
    left:0;
    top:0;
    z-index: 10;
    color:#ac5d9a;
    -webkit-mask:-webkit-gradient(linear, left top, right bottom,from(#ac5d9a), to(rgba(0, 0, 0, 0)));
}

背景渐变

• 参考链接
• 代码

.bg-gradient{
    /*ie10+*/
    background: -webkit-linear-gradient(top, #ac5d9a 0%, #fbf409 100%);
    background: -moz-linear-gradient(top, #ac5d9a 0%, #fbf409 100%);
    background: -o-linear-gradient(top, #000000 0%,#ffffff 100%);
    background: -ms-linear-gradient(top, #ac5d9a 0%, #fbf409 100%);
   
    /*兼容chrome4.0-9.0使用的更老的语法。。在ie中都没色*/
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ac5d9a), color-stop(100%,#fbf409));
     /*ie10+*/
     background: linear-gradient(to bottom, #ac5d9a 0%, #fbf409 100%);
    /*兼容ie9及ie以下*/
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ac5d9a', endColorstr='#fbf409',GradientType=0 );
}

这篇关于渐变的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！