css3 字扩散,Css3 文字渐变整理（一）

一、文本颜色渐变

：可以应用在所有接受图像的属性上，允许使用简单的语法实现颜色渐变，以便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;

}

显示结果：

更多：