关闭

css3-渐变

标签: css3
61人阅读 评论(0) 收藏 举报
------------------------------------------------------------------------
                            css3-渐变

A:----------------------

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


B:--------------------------------------
    
    webkit引擎的CSS3线性渐变语法
        老式: 
            -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> : 通过角度确定渐变的方向;   0= 从上到下  90°=从左到右    取值为下值,角度顺时针旋转

                    关键词: 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) ;
                    

                                                    

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:4565次
    • 积分:312
    • 等级:
    • 排名:千里之外
    • 原创:28篇
    • 转载:1篇
    • 译文:0篇
    • 评论:1条