CSS3 Gradient

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

线性渐变

在 Mozilla下的应用

【语法】

-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

参数有三个：

• 第一个：表示线性渐变的方向，top 是从上到下、left是从左到右、left top 就是 从左上角到右下角
• 第二个和第三个参数：表示起点颜色和终点颜色，之间可以插入更多的参数，表示多种颜色的渐变

HTML:

    <div class="example example1"></div>

CSS:

    .example {
       width: 150px;
       height: 80px;
     }
    .example1 {
       background: -moz-linear-gradient( top,#ccc,#000);
    }

在 webkit下的应用

【语法】

-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )//最新发布书写语法
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) //老式语法书写规则

参数有5个：

• 第一个 type：表示渐变类型，可以是 linear（线性渐变）或者 radial（径向渐变）。
• 第二个和第三个参数：表示渐变的起点和终点，可以是坐标的形式，也可以是关键字（比如：left top）
• 第四个和第五个：颜色起点和颜色终点；

例子：

老式

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

新式

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

在Opera下的应用

【语法】

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

示例：

background: -o-linear-gradient(top,#ccc, #000);