小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

渐变使用

CSS渐变是在CSS3 Image Module中新增加的<image> 类型.使用CSS渐变可以

在两种颜色间制造出平滑的渐变效果.用它代替图片,可以加快页面的载入时间、

减小带宽占用。同时，因为渐变是由浏览器直接生成的，它在页面缩放时的效果

比图片更好，因此你可以更加灵活、便捷的调整页面布局。

浏览器支持两种类型的渐变:线性渐变(linear), 通过linear-gradient 函数定义,

以及径向渐变(radial), 通过radial-gradient函数定义。

渐变是什么

CSS渐变是CSS3的Image模块中新增的内容。利用CSS渐变替代在HTML页面中

引入渐变效果的图片，这样减少HTML页面加载的时间，减小带宽的占用。

由于CSS渐变是由浏览器直接生成，在HTML页面缩放时的效果要比图片更好，

使得可以更灵活、便捷地调整HTML页面布局。

CSS3中新增的渐变主要分以下两种:

• 线性渐变
• 径向渐变
• 重复渐变

线性渐变构成

线性渐变由一个轴 (基准线)定义的，井且轴上每个点都具有独立的颜色。linear-

gradient()函数构建垂直于基准线的渐变效果，渐变的颜色取决于与之垂直相交

的基准线上的色点。

基准线由包含渐变效果容器元素的中心点和一个角度来定义的。基准线上的颜色

值则由不同的点来定义，包括起始点、终止点以及两者之间可选的中间点(中点

可以有多个)。起始点是基准线和容器元素的顶点与基准线垂直线的相交点来定

义。

终止点是基准线和容器元素最近顶点与基准线垂直线的相交点来定义。

线性渐变语法

CSS linear-gradient()函数用于创建一个 表示两种战多种颜色线性渐变的图片。具体语法结构如下:

linear-gradient(<angle> | <side-or-corner>, <color-stop>, <color-stop>+)

上述语法的参数说明:

• 第一个参数用于定义线性渐变的方向，并且定义渐变颜色的终止位置。

  • angle:通过角度来定义渐变的方向。0度表示渐变方向从下向上，90

    度表示渐变从左向右。其角度按照顺时针方向增加。

  • side-or-corner:通过关键字定义渐变的方向。具有两个关键字，一

    个表示水平位置( left或right)，一个表示垂直位置( top或bottom)。

    关键字的先后顺序无影响并且都是可选的。

• 第二个参数、第三个参数用于定义渐变颜色的起始点和终止点。

浏览器兼容问题

对于较老版本的浏览器，linear-gr adient()函数通过添加“prefix” 前缀进行兼容。

/*旧语法，带前缀并且已经废弃，以支持老版本的浏览器*/
-prefix-linear-zgradient(<angle> | <side-or-corner>, <color-stop>, <color-stop>)

除了上述方案可以兼容较老版本浏览器之外，不同引擎的浏览器也提供了不同的前缀用法:

/* WebKit引擎的浏览器(Chrome、 Safari、 Opera) */
-webkit-linear-gradient(<angle>| <side-or-corner>, <color-stop>, <color-stop>)
​
/* Gecko引擎的浏览器(Firefox) */
-moz-linear-gradient(<angle>| <side-or-corner>, <color-stop>, <color-stop>)
​
/* Trident引擎的浏览器(IE 10+) */
-ms-linear-gradient(<angle>| <side-or-corner>, <color-stop>, <color-stop>)
​
/* Presto引擎的浏览器(Opera) */
-o-linear-gradient(<angle> | <side-or-corner>, <color-stop>, <color-stop>)