纯css径向渐变(CSS3--Gradient)

渐变

一、CSS3的径向渐变

效果图网址：http://www.spritecow.com 图像拼接技术

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

html代码：

 <h1>Hold the front page</h1>
 <p>Now you get the nitty-gritty of the story.</p>
 <p>The most important information is delivered first.</p>
 <h1>Extra!Extra!</h1>
 <p>Further developments are unfolding.</p>
 <p>You can read all about it here.</p>

css代码：

 *{margin:; padding:;}
 html{ height:100%;
      background:-webkit-radial-gradient(center center,circle cover,#0091d5 0%,#0091d5 15%,#004a86 100%);
      background: -moz-radial-gradient(center center,circle cover,#0091d5 0%,#0091d5 15%,#004a86 100%);
      background: -ms-radial-gradient(center center,circle cover,#0091d5 0%,#0091d5 15%,#004a86 100%)
      background: -o-radial-gradient(center center,circle cover,#0091d5 0%,#0091d5 15%,#004a86 100%)}
 body{ background:url(index.png); height:100%; color:#3CC;}

注释：radial:[ˈreɪdiəl] 径向的。  gradient：[ˈgreɪdiənt] 倾斜，梯度，陡度。circle:['sɜ:kl] 圆

二、线性渐变在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; }

现在我们给这个div应用一个简单的渐变样式：

 .example1 {
    background: -moz-linear-gradient( top,#ccc,#000);
 }

效果如下：

注：这个效果暂时只有在Mozilla内核的浏览器下才能正常显示。