纯css径向渐变(CSS3--Gradient)
渐变
一、CSS3的径向渐变
效果图网址：http://www.spritecow.com 图像拼接技术
CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。
html代码：
1 <h1>Hold the front page</h1> 2 <p>Now you get the nitty-gritty of the story.</p> 3 <p>The most important information is delivered first.</p> 4 <h1>Extra!Extra!</h1> 5 <p>Further developments are unfolding.</p> 6 <p>You can read all about it here.</p>
css代码：
1 *{margin:0; padding:0;} 2 html{ height:100%; 3 background:-webkit-radial-gradient(center center,circle cover,#0091d5 0%,#0091d5 15%,#004a86 100%); 4 background: -moz-radial-gradient(center center,circle cover,#0091d5 0%,#0091d5 15%,#004a86 100%); 5 background: -ms-radial-gradient(center center,circle cover,#0091d5 0%,#0091d5 15%,#004a86 100%) 6 background: -o-radial-gradient(center center,circle cover,#0091d5 0%,#0091d5 15%,#004a86 100%)} 7 body{ background:url(index.png); height:100%; color:#3CC;}
注释：radial:[ˈreɪdiəl] 径向的。 gradient：[ˈgreɪdiənt] 倾斜，梯度，陡度。circle:['sɜ:kl] 圆
二、线性渐变在Mozilla下的应用
语法：
1 -moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
参数：其共有三个参数，第一个参数表示线性渐变的方向，top是从上到下、left是从左到右，如果定义成left top，那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数，表示多种颜色的渐变。如图所示：
根据上面的介绍，我们先来看一个简单的例子：
HTML：
1 <div class="example example1"></div>
CSS：
1 .example { width: 150px; height: 80px; }
现在我们给这个div应用一个简单的渐变样式：
1 .example1 { 2 background: -moz-linear-gradient( top,#ccc,#000); 3 }
效果如下：
注：这个效果暂时只有在Mozilla内核的浏览器下才能正常显示。
