CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。
首先,我们先来了解一下目前的几种现代浏览器的内核,主流的主要有Mozilla(Gecko)(熟悉的有Firefox,Flock等浏览器)、WebKit(熟悉的有Safari、Chrome等浏览器)、Opera(presto)(Opera浏览器)、Trident(IE浏览器)。
接下来,我们就来详解Gradient渐变的具体用法。
一、linear-gradient(线性渐变)
1.1 语法
linear-gradient( [ || ,]? , [, ]* } //标准写法
-webkit-linear-gradient( [ || ,]? , [, ]* } //在WebKit浏览器下的应用
-moz-linear-gradient( [ || ,]? , [, ]* ) //在Mozilla浏览器下的应用
-o-linear-gradient([ || ,]? , [, ]); //在Opera浏览器下的应用
1.2 参数解析
参数:
是角度,单位为deg
point : 第一个参数表示线性渐变的方向,可用关键字top、left、bottom、right,to top是从上到下、to left是从左到右,如果定义成to left top,那就是从左上角到右下角(to可省略)。
= [ | ]:
:指渐变的起止颜色。
:用长度值指定起止色位置,不允许负值。
:用百分比指定起止色位置。
例子:
background:linear-gradient(left top,yellow,blue);
background:-webkit-linear-gradient(left top,yellow,blue);
background:-moz-linear-gradient(left top,yellow,blue);
background:-o-linear-gradient(left top,yellow,blue);
当然,你还可以在它们之间插入更多的参数,表示多种颜色的渐变。
例子:background: linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
1.3 使用角度
角度是指水平线和渐变线之间的角度,逆时针方向计算。换句话说,0deg 将创建一个从下到上的渐变,90deg 将创建一个从左到右的渐变。
注意:有部分浏览器使用了旧的标准,即 0deg 将创建一个从左到右的渐变,90deg 将创建一个从下到上的渐变。换算公式 90 - x = y 其中 x 为标准角度,y为非标准角度。
1.4 重复的线性渐变background: -webkit-repeating-linear-gradient(red, yellow 10%, green 15%);
background: -o-repeating-linear-gradient(red, yellow 10%, green 15%);
background: -moz-repeating-linear-gradient(red, yellow 10%, green 15%);
background: repeating-linear-gradient(red, yellow 10%, green 15%);
二、径向渐变(radial-gradient)
径向渐变由它的中心定义。
为了创建一个径向渐变,你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。
同时,你也可以指定渐变的中心、形状(原型或椭圆形)、大小。默认情况下,渐变的中心是 center(表示在中心点),渐变的形状是 ellipse(表示椭圆形),渐变的大小是 farthest-corner(表示到最远的角落)。
语法-moz-radial-gradient([ || ,]? [] [,]? , [, ]*);
-webkit-radial-gradient([ || ,]? [] [,]? , [, ]*);
-o-radial-gradient([ || ,]? [] [,]? , [, ]*);
radial-gradient([ || ,]? [] [,]? , [, ]*);
参数说明:
:用来定义径向渐变的圆心位置,类似background-position,默认为center。可用关键字top、left、bottom、right、center、、。
是角度,单位为deg
:定义径向渐变的形状,有两个可选值“circle”和“ellipse”
:用来确定径向渐变的结束形状大小,默认值为“farthest-corner”,其他值:
closest-side:指定径向渐变的半径长度为从圆心到离圆心最近的边;
closest-corner:指定径向渐变的半径长度为从圆心到离圆心最近的角;
farthest-side:指定径向渐变的半径长度为从圆心到离圆心最远的边;
farthest-corner:指定径向渐变的半径长度为从圆心到离圆心最远的角;
= [ | ]:
:指渐变的起止颜色。
:用长度值指定起止色位置,不允许负值。
:用百分比指定起止色位置。
例子:颜色结点均匀分布的径向渐变background: -webkit-radial-gradient(white, green, orange);
background: -o-radial-gradient(white, green, orange);
background: -moz-radial-gradient(white, green, orange);
background: radial-gradient(white, green, orange);
例子:结点不均匀的径向渐变background: -webkit-radial-gradient(white 2%, green 10%, orange 50%);
background: -o-radial-gradient(white 2%, green 10%, orange 50%);
background: -moz-radial-gradient(white 2%, green 10%, orange 50%);
background: radial-gradient(white 2%, green 10%, orange 50%);
例子:定义形状
shape 参数定义了形状。它可以是值 circle 或 ellipse。其中,circle 表示圆形,ellipse 表示椭圆形。默认值是 ellipse。background: -webkit-radial-gradient(circle,white, green, orange);
background: -o-radial-gradient(circle,white, green, orange);
background: -moz-radial-gradient(circle,white, green, orange);
background: radial-gradient(circle,white, green, orange);
重复的径向渐变background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);
background: -o-repeating-radial-gradient(red, yellow 10%, green 15%);
background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%);
background: repeating-radial-gradient(red, yellow 10%, green 15%);
如有错误,欢迎指正!