css3 - Gradient - 渐变

浏览器的内核主要有: 

　　 -moz- (Firefox);

　　-webkit- (Safari、Chrome);

　　-o- (Opera);

gradient 分两种：

　　1、线性渐变（-linear-）

　　2、径向渐变（-radial-）

 

一、线性渐变

语法：/* 语法，参考自: http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/ */

-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

参数：point 表示线性渐变的方向如,left（从左到右）、top、left top、bottom...,angle 表示角度（45deg表示45度角）、stop 表示渐变的颜色（第一个为起始颜色，第二个为末尾颜色）中间可以有很多中颜色如 (#ccc,#666,#F00,#333.....)

不同角度渐变:

如果你不需要从一个颜色到另一个颜色的100%渐变怎么办？就可以在颜色后面加上百分比或者是数值px（#ccc 10%,#666 12px,）。一个普遍的设计技术是使用一个较短而细微的渐变如图

注意顶部的浅灰色到白色的细小的渐变

firefox下实例html：

<div class="gradient1">
 （firefox）由左向右（45）度角渐变，颜色 → #ccc 30% → #9F79EE → #7FFF00 
   <br />*（#ccc 占百分之30） 
</div>

 css：

.gradient1{width:100%;height:120px;line-height:30px;padding:5px 0;border-bottom: 2px solid #8A2BE2;
background:-moz-linear-gradient(left 45deg,#ccc 30%,#9F79EE,#7FFF00);/*firefox*/
background:-webkit-linear-gradient(left top,#ace,#f96);/*#ace-----#aaccee的缩写 */
background:-o-linear-gradient(bottom，#FFD700,#FF4040);
/*线性渐变*/
}

结果如图：

采用RGBA渐变：

html
<ul>
    <li class="rgba1">rgba值为：0.8</li>
    <li class="rgba2">rgba值为：0.6</li>
    <li class="rgba3">rgba值为：0.4</li>
    <li class="rgba4">rgba值为：0.2</li>
</ul>

css
.rgba1{
    background: rgba(255,255,0,0.8);border-right:1px solid red;
}
.rgba2{
    background: rgba(255,255,0,0.6);border-right:1px solid red;
}
.rgba3{
    background: rgba(255,255,0,0.4);border-right:1px solid red;
}
.rgba4{
    background: rgba(255,255,0,0.2);
    /*rgba渐变*/
}

结果如图：

 

渐变上应用透明─透明度：

---透明渐变效果图对比---

html代码：

<div class="gradient2">
    一个白色到透明的线性渐变
</div>

css代码：

.gradient2{
    width:100%;height:120px;line-height:30px;padding:5px 0;border-bottom: 2px solid #8A2BE2;
    background: -moz-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)),url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
    background: -webkit-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)),url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
    /*白色到透明渐变*/
}

结果如图：

二、径向渐变

语法：

-moz-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*);

径向渐变允许你指定渐变的形状（圆形 circle 或椭圆形 ellipse）和大小（最近端，最近角，最远端，最远角，包含或覆盖< closest-side, closest-corner, farthest-side, farthest-corner, contain or cover >）

html:

<div class="radial1"><br />均匀间隔渐变</div>
<div class="radial2"><br />圆角渐变</div>
<div class="radial3"><br />椭角渐变</div>
<div class="radial4"><br />圆心大小</div>

css:

.radial1{
    height:120px;padding:5px 0;width:25%;
    background:-moz-radial-gradient(#333,#9F79EE,#7FFF00 );float:left;
    /*均匀间隔渐变*/
}
.radial2{
    height:120px;padding:5px 0;width:25%;
    background:-moz-radial-gradient(bottom left,circle,#333 50%,#9F79EE,#7FFF00);float:left;
    /*圆角渐变*/
}
.radial3{
    height:120px;padding:5px 0;width:25%;
    background:-moz-radial-gradient(bottom left,ellipse,#333 50%,#9F79EE,#7FFF00);float:left;
    /*椭角渐变*/
}

.radial4{
    height:120px;padding:5px 0;width:25%;
    background:-moz-radial-gradient(circle closest-side,#333 50%,#9F79EE,#7FFF00);float:left;
    /*设定圆心或椭圆大小点*************《 size的不同选项(closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)指向被用来定义圆或椭圆大小的点。》*/
}

结果如图：

重复渐变（repeating）的应用:

 .repeating_radial_gradient_example {
    background: -moz-repeating-radial-gradient(black, black 5px, white 5px, white 10px);
}
 .repeating_linear_gradient_example {
     background: -moz-repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px);
}

结果如图：

更多知识：

http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/