首页 专题 H5案例 前端导航 UI框架

css3 Gradient渐变

阅读 821 评论 0
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( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* } //标准写法

-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* } //在WebKit浏览器下的应用

-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* ) //在Mozilla浏览器下的应用

-o-linear-gradient([<point> || <angle>,]? <stop>, <stop> [, <stop>]); //在Opera浏览器下的应用

1.2 参数解析
参数:
<angle>是角度,单位为deg
point : 第一个参数表示线性渐变的方向,可用关键字top、left、bottom、right,to top是从上到下、to left是从左到右,如果定义成to left top,那就是从左上角到右下角(to可省略)。
<stop > = <color> [ <length> | <percentage>]:
<color>:指渐变的起止颜色。
<length>:用长度值指定起止色位置,不允许负值。
<percentage>:用百分比指定起止色位置。

例子:

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([<position> || <angle>,]? [<shape>] [<size>,]? <color-stop>, <color-stop>[, <color-stop>]*); -webkit-radial-gradient([<position> || <angle>,]? [<shape>] [<size>,]? <color-stop>, <color-stop>[, <color-stop>]*);

-o-radial-gradient([<position> || <angle>,]? [<shape>] [<size>,]? <color-stop>, <color-stop>[, <color-stop>]*);

radial-gradient([<position> || <angle>,]? [<shape>] [<size>,]? <color-stop>, <color-stop>[, <color-stop>]*);


参数说明

<position>:用来定义径向渐变的圆心位置,类似background-position,默认为center。可用关键字top、left、bottom、right、center、<length>、<percentage>。


<angle>是角度,单位为deg

<shape>:定义径向渐变的形状,有两个可选值“circle”和“ellipse”

<size>:用来确定径向渐变的结束形状大小,默认值为“farthest-corner”,其他值:
closest-side:指定径向渐变的半径长度为从圆心到离圆心最近的边; closest-corner:指定径向渐变的半径长度为从圆心到离圆心最近的角; farthest-side:指定径向渐变的半径长度为从圆心到离圆心最远的边; farthest-corner:指定径向渐变的半径长度为从圆心到离圆心最远的角;

<stop > = <color> [ <length> | <percentage>]:
<color>:指渐变的起止颜色。
<length>:用长度值指定起止色位置,不允许负值。
<percentage>:用百分比指定起止色位置。


例子:颜色结点均匀分布的径向渐变

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%);



如有错误,欢迎指正!



关注”全栈技术杂货铺“

全栈技术杂货铺