css 文字颜色渐变上到下,CSS 实现背景色渐变和文字颜色渐变

1. 背景色渐变css

A . linear-gradient：用线性渐变建立图像。web

语法： = linear-gradient([ [  | to  ] ,]? [, ]+)浏览器

下述值用来表示渐变的方向，可使用角度或者关键字来设置：

：用角度值指定渐变的方向(或角度)。

to left：

设置渐变为从右到左。至关于: 270deg

to right：

设置渐变从左到右。至关于: 90deg

to top：

设置渐变从下到上。至关于: 0deg

to bottom：

设置渐变从上到下。至关于: 180deg。

这是默认值，等同于留空不写。

用于指定渐变的起止颜色：

指定颜色。

用长度值指定起止色位置。不容许负值

用百分比指定起止色位置。

兼容：除了被扫进历史垃圾堆的IE8,9，以及Opera Mini 不兼容，其余浏览器，包括移动端的浏览器，都能支持这个属性。ide

若是渐变方向是对角线的话，能够用 to top right 这样的多关键字方式来实现。如：字体

background: linear-gradient(to top right, #f6f5f0, #fefefd);

若是有多个颜色渐变，颜色的参数能够有多个(如图1):spa

background: linear-gradient(to top right, #CDDC39, #8BC34A, #FFEB3B);

能够指定颜色渐变的位置(如图2)：3d

background: linear-gradient(to top right, #CDDC39 0%, #8BC34A 25%, #FFEB3B 100%);

图1　　　　　　　　　　　　　　　　　　　　　　图 2code

B. radial-gradient：用径向渐变建立图像。htm

语法： = radial-gradient([ [  ||  ] [ at  ]? , | at , ]?[ ,  ]+)blog

肯定圆心的位置。若是提供2个参数，第一个表示横坐标，第二个表示纵坐标；若是只提供一个，第二值默认为50%，即center

用百分比指定径向渐变圆心的横坐标值。能够为负值。

①：用长度值指定径向渐变圆心的横坐标值。能够为负值。

left：

设置左边为径向渐变圆心的横坐标值。

center①：

设置中间为径向渐变圆心的横坐标值。

right：

设置右边为径向渐变圆心的横坐标值。

用百分比指定径向渐变圆心的纵坐标值。能够为负值。

用长度值指定径向渐变圆心的纵坐标值。能够为负值。

top：

设置顶部为径向渐变圆心的纵坐标值。

center②：

设置中间为径向渐变圆心的纵坐标值。

bottom：

设置底部为径向渐变圆心的纵坐标值。

肯定圆的类型

circle：

指定圆形的径向渐变

ellipse：

指定椭圆形的径向渐变。

circle | ellipse 都接受该值做为 size

closest-side：

指定径向渐变的半径长度为从圆心到离圆心最近的边

closest-corner：

指定径向渐变的半径长度为从圆心到离圆心最近的角

farthest-side：

指定径向渐变的半径长度为从圆心到离圆心最远的边

farthest-corner：

指定径向渐变的半径长度为从圆心到离圆心最远的角

circle 接受该值做为 size

用长度值指定正圆径向渐变的半径长度。不容许负值。

ellipse 接受该值做为 size

用长度值指定椭圆径向渐变的横向或纵向半径长度。不容许负值。

用百分比指定椭圆径向渐变的横向或纵向半径长度。不容许负值。

用于指定渐变的起止颜色：

指定颜色。

用长度值指定起止色位置。不容许负值

用百分比指定起止色位置。不容许负值

用例子来讲明(如图3)：

background: radial-gradient(circle, #CDDC39, #8BC34A);

第一个参数有两个值：circle正圆，ellipse椭圆。 默认从圆心向四周渐变。也能够用两个长度数字来表示圆形，好比50px 50px。有这样几种写法：

circle at center (或者left right)

circle at 50% (这个百分比数字能够改为任意想要的位置)

circle farthest-corner (或者其余3个值。)

图3

2.  文本颜色渐变

：能够应用在全部接受图像的属性上，容许使用简单的语法实现颜色渐变，以便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支持，而且必须带前缀。

因此，若是您的目标用户颇有可能会用IE浏览器，那么，就须要再写一个IE下能正常浏览的代码：