css3 Gradient渐变色

简介

首先，CSS3通过gradient()函数创建了一个图片，其由两个或者多个颜色的渐变组成。这个方法得到的是一个CSS数据类型的对象，其是 的一种。Gradient地位等价于background-img，也就是说对background-img的所有修饰都能用于gradient。repeat，size，positon……。
而Gradient 又分为 linear-gradient（线性渐变）和 radial-gradient（径向渐变）

线性渐变（ linear-gradient）

linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。
语法：

 linear-gradient(side/corner,angle,[linnear-color-stop])

side/corner
描述的是渐变线起始点的位置，包含to和两个位置的关键词top/bottom，left/right。这些值也会被转换成角度，0deg表示渐变从下往上，90deg表示渐变从左往右，180deg表示渐变从上往下，270deg表示渐变从右往左。其实就是顺时针走一圈。渐变线的结束点与其起点中心对称。
angle
用角度值指定渐变的方向
linear-color-stop
自己定义的线性颜色组成。可以是百分比或者是沿着渐变轴的长度。

新版本的浏览器用标准语法没有问题，但是低版本的浏览器需要添加各个浏览器的私有语法，需要加上前缀，-webkit-，-moz-，-ms-，IE10以下不支持渐变。

以下是一个5色渐变的例子

linear-gradient(to top, rgb(255, 238, 164) 0%, rgb(233, 207, 88) 8%, rgb(255, 247, 132) 50%, rgb(255, 250, 174) 74%, rgb(255, 253, 215) 100%)

径向渐变（ radial-gradient）

 radial-gradient(position,shape,size,[color-stop])

position
与background-position或者transform-origin类似，确定圆心位置，缺省时默认为center。可以通过top，left，right，bottom。也可以使用px值和百分比。
例：px值：farthest-corner at 40px 40px
shape/size
shap：渐变的形状,circle(正圆)和ellipse(椭圆)
size：设置渐变形状的半径，可以用百分比或者px值表示。还有预定好的：closest-side,closest-corner,fathest-side,farthest-corner。默认值是farthest-corner,shape/size可以缺省，默认为正圆
color-stop
定义的渐变颜色。
例：

background-image: radial-gradient(circle,red,orange,#071B26);

文字颜色渐变应用

将文字所在的元素背景设置为文字，规定背景的绘制区域为文字，文字颜色设置为透明色，实现文字上色的效果。

-webkit-background-clip：text;
color:transparent;

渐变重复

gradient拥有和background-img相同的地位，可以通过background-repeat实现重复，也可以使用css函数实现渐变重复。
epeating-linear-gradient和epeating-radial-gradient