css3 Gradient线性渐变详解

CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient

我们主要看看Mozilla,Webkit,Opera下的应用

在Mozilla的应用下：

其共有三个参数，第一个参数表示线性渐变的方向，top是从上到下、left是从左到右，如果定义成left top，那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数，表示多种颜色的渐变。

<div class="example"></div>
.example{
　　　　　　width:100px;height:100px;
　　　　　　background:moz-linear-gradient(top,#ccc,#000)
　　　　}

-webkit应用：

-webkit-gradient,一共五个参数，第一个：渐变类型（可以是linear线性渐变或者radial径向渐变）；

第二个和第三个是一对值，分别是表示渐变起点和终点。这对值可以用坐标形式表示，也可以用关键值表示，比如left top ;left bottom.

第四个和第五个参数，分别是color-stop函数。color-stop函数接受两个参数，第一个表示渐变的位置，0为起点，0.5为中点，1为结束点；第二个表示该点的颜色。

旧写法：

background: -webkit-gradient(linear,center top,center bottom,from(#ccc), to(#000));

新写法：

-webkit-linear-gradient(top,#aaa,#000);

Opera下的应用：

参数：-o-linear-gradient有三个参数。第一个参数表示线性渐变的方向，top是从上到下、left是从左到右，如果定义成left top，那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数，表示多种颜色的渐变。

-o-linear-gradient([<point> || <angle>,]? <stop>, <stop> [, <stop>]); /* Opera 11.10+ */

 

转载于:https://www.cnblogs.com/Jessical8619/p/9098644.html