纯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浏览器都是没效果的。

转载于:https://www.cnblogs.com/JavaTechLover/archive/2012/06/25/2561005.html