纯CSS做背景渐变

针对不同的的浏览器语句写法稍有不同。

Gecko引擎的使用的语句为“ -moz-linear-gradient”，而WebKit的引擎使用的是-webkit-gradient。有略微的不同，但实现效果是一样的。

基于gecko的浏览器(Firefox)：

linear线性渐变是该语句的一部分

top:顶部渐变开始的地方

＃FFFFFF 十六进制的颜色渐变的开始颜色（白色）

＃003366 十六进制的颜色渐变的结束颜色（深蓝色）

基于Webkit的浏览器(Chrome, Safari)：

linear作为-webkit-gradient的值的一部分，放在括号内。

left top左上角声明梯度开始

left bottom左下角声明梯度完成

from(#55aaee)渐变的开始颜色(＃FFFFFF)十六进制的颜色代码（白色）

to(#003366)渐变结束颜色(＃003366)十六进制的颜色代码（深蓝色）

for example：

HTML CODE:

<div class=”css.grd”>

<p>对div元素应用CSS背景色渐变</p>

<div>

CSS CODE:

.css-grd {

/* default background colour, for all layout engines that don’t implement gradients */

background: #2a6da9;

/* gecko based browsers */

background: -moz-linear-gradient(top, #FFFFFF, #003366);

/* webkit based browsers */

background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#003366));

color: #000000; /* text colour (black) */

height: auto; /* gradient uses the full height of the element */

padding: 5px; /* distance from border edge to text */

}

注意：以上这些方法对IE浏览器都是没效果的。