CSS3渐变相关

背景渐变

background: -moz-linear-gradient( top,#f24652,#da2c3c);

background: -o-linear-gradient(top,#f24652,#da2c3c);

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f24652),to(#da2c3c));

或

background: -webkit-linear-gradient(left, #f8ca99,#c28c6a);

 

文字渐变

background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#fe7579), to(#e93849));

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

background-image: -moz-linear-gradient( top,#fe7579,#e93849);

-moz-background-clip: text;

-moz-text-fill-color: transparent;

background-image: -o-linear-gradient( top,#fe7579,#e93849);

-o-background-clip: text;

-o-text-fill-color: transparent;

background-image: -ms-gradient(linear, 0 0, 0 bottom, from(#fe7579), to(#e93849));

-ms-background-clip: text;

-ms-text-fill-color: transparent;

 

mask方法:

-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(#f8ffcb), to(#fcea94)));