前端录网站,记录前端点点滴滴,帮助程序猿快速成长!

酷炫的文字渐变效果

css3

 background-clip + text-fill-color下的实现
支持chrome和safari.


css:


.gradienttxt {
  background-image:-webkit-gradient(linear,0 0,0 bottom,from(#fff),to(#ffe760));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

测试chrome内核的手机支持,其他内核的手机并未测试,是不是很酷,赶紧试试吧!

参考张鑫旭博客:http://www.zhangxinxu.com/wordpress/2011/04/小tipCSS3下的渐变文字效果实现


转载请注明:前端录»酷炫的文字渐变效果