css3-渐变

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
                            css3-渐变

Ａ：－－－－－－－－－－－－－－－－－－－－－－

    色标：　创建渐变的过程中，可以指定多个中间颜色值，这个值为色标


B:--------------------------------------
    
    webkit引擎的ＣＳＳ３线性渐变语法
        老式：　
            -webkit-gradien( <type> , <point> [,<radius>] ? , <point> [,<radius>] ? ,[,<stop>]*)

        新式：
            －webkit-linear-gradient( [<point> || <angle>,] ? <stop> , <stop> [,<stop>]* )

                type: 渐变类型(linear / radial)
                第二个第三个值-: 起点和终点值　（可以坐标　／　关键值left top
                第四个第五个值-:　两个color-stop色标
                            （该函数接受两个参数＝＝＝＝第一个: 位置－0=起点，1＝终点，0.5＝中点；　第二个：颜色

        eg: -webkit-gradient: (linear, left top, left bottom, from(#ccc),to(#000) ) ;
        
        　　　 -wekit-linear-gradient: (top, #ccc, #000) ;

    Gecko引擎:
        ：　与webkit基本相同　
        ：　前缀：　-moz-linear-gradient( [<point> || <angle>,] ? <stop>,<stop>[,<stop>]*)

        eg: -moz-linear-gradient( top,#ccc,#000);
            !!!第一个参数为方向，top从上到下，left从左到右，如果定义为left top,==从左上角－>　右下角

    Presto引擎：

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


    Trident引擎：

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

    W3C标准：
        linear-gradient: ( [ [<angle> | to <side-or-corner> ],] ? <color-stop> [,<color-stop> ]+ )    

            第一个参数：　指定渐变的方向，同时决定渐变颜色的停止位置。（　省略取值to bottom)
                <angle> : 通过角度确定渐变的方向；　　　０＝　从上到下　　９０°＝从左到右    取值为下值，角度顺时针旋转

                    关键词: to right, to top, to bottom, to left // top left.....
                    角度值：0deg , 90deg,  180deg , 270deg
            第二个第三个： 颜色值，颜色的起点值和终点值


B:--------------------------------------
    
    径向渐变：
    webkit:
        old:    -webkit-gradient(     [<type>] ,    [<position> || <angle>,] ?     [<shape> || <size>,] ?
                         <color-stop>,<color-stop>  [,color--stop>]*) ;        

        new:    -webkit-radial-gradient( <position> ||　<angle>,] ? <shape> || <size>,]?
                         <color-stop> , <color-stop>)

    Gecko:
            -moz-radial-gradient( <position> ||　<angle>,] ? <shape> || <size>,]?
                         <color-stop> , <color-stop>)

    Presto:    
            -o-radial-gradient( <position> ||　<angle>,] ? <shape> || <size>,]?
                         <color-stop> , <color-stop>)

    Trident:
            -ms-radial-gradient( <position> ||　<angle>,] ? <shape> || <size>,]?
                         <color-stop> , <color-stop>)
    
    W3C:
            -radial-gradient( [[<shape> || <size>] [at <position>?, | at <position>,] ? <color-stop> [,<color-stop>]+);

                <position>: 定义径向渐变的圆形位置，默认center
                    <length>:    长度值指定径向渐变圆心的横坐标或纵坐标，可负值
                    <percentage>:    用百分比指定径向渐变圆心的横坐标值或纵坐标
                        left:    设置左边为径向渐变圆心的横坐标值
                     center :    设置中间为径向渐变圆心的横坐标值
                      right :    设置右边为径向渐变圆心的横坐标值
                    　  top  :    设置顶部为径向渐变圆心的纵标值
                    bottom  :    设置底部为径向渐变圆心的纵标值
            
                <shape>: 定义径向渐变的形状
                    circle:     圆形
                    ellipse:    椭圆形

                <size>: 确定径向渐变的结束形状大小
                    closest-side:    半径从圆心到离圆心最近的边
                    closest-corner: 半F径从圆心到离圆心最近的角
                    farthest-side:    半径从圆心到离圆心最远的边
                    farthest-corner:半径从圆心到离圆心最远的角

                    ！如果<shape>: circle/省略./ <size>可能显示设置为<length>   ；正值/0
                    　　　　　　<shape>: ellipse/省略。　size可以显式的设置为[<length> | <percentage>]
                                    第一个值：水平半径； 第二个值：垂直半径；
                                                正值/0
                <<color-stop>: 径向渐变线上的停止颜色。从中心点向右扩散，0%起点，100%终点， 可以为负值


D：---------------------------------
    重复渐变： repeating-linear-gradient   +    reapeating-radial-gradient
        
    eg: background-image: -webkit-repeating-linear-gradient(red, green 40px, orange 80px) ;