一、文本颜色渐变
:可以应用在所有接受图像的属性上,允许使用简单的语法实现颜色渐变,以便UA在渲染页面自动生成图像。
注意:必需在一个有尺寸的盒子里生成。如果盒子没有尺寸,渐变效果则无法呈现。
可以作用在能接受图像的任意属性上:
background-image: -webkit-gradient(linear, left 0, right 0, from(rgb(4, 94, 170)), to(rgb(1, 152, 216)));
list-style-image: -webkit-gradient(linear, left 0, right 0, from(rgb(4, 94, 170)), to(rgb(1, 152, 216)));
文字颜色渐变比较麻烦,并且兼容性差强人意:
background-image: -webkit-gradient(linear, left 0, right 0, from(rgb(4, 94, 170)), to(rgb(1, 152, 216)));
-webkit-background-clip: text; /*必需加前缀 -webkit- 才支持这个text值 */
-webkit-text-fill-color: transparent; /*text-fill-color会覆盖color所定义的字体颜色: */
兼容性:
text-fill-color,IE果然又不兼容。移动端UC浏览器也不兼容。
-webkit-background-clip: text; 非正式属性,目前(2017-07-07)仅仅FF、Chrome、Safari支持,并且必须带前缀。
二、代码示例
css字体文字渐变,css字体文字渐变
.demo{width:500px;height:200px;margin:50px auto;font-size:20px;background-image:-webkit-gradient(linear, left 0, right 0, from(rgb(166, 4, 249)), to(rgb(251, 223, 11)));
/*必需加前缀 -webkit- 才支持这个text值*/-webkit-background-clip:text;
/*text-fill-color会覆盖color所定义的字体颜色:*/-webkit-text-fill-color:transparent;
}
显示结果:
更多: