css webkit gradient radial

.gradient_radial{

    /*

    *第一個是type (有linear 同radial)

    *第二個是開始的位置, x 同y, 用%, 用space 分隔

    *第三個是第一個㘣的radius

    *第四個是結束的位置, x 同y, 用%, 用space 分隔

    *第五個是第二個㘣的radius

    *第六個是開始的color, 一定要有from

    *最後一個是結束的color, 一定要有to

    *

    *第六個同最後一個中間可以加 color-stop(位置, 顏色), 咁就可以做出幾隻色的gradient

    *

    *如果第一個圓的radius 大過第二個圓的radius, d 顏面就會掉轉 (由出至入)   

    */
    background: -webkit-gradient(radial, 70% 70%, 20, 50% 50%, 130,
    from(red),
    color-stop(16%, orange),
    color-stop(33%, yellow),
    color-stop(49%, green),
    color-stop(66%, blue),
    color-stop(83%, indigo),
    to(violet));
}

css webkit gradient linear

用css 去砌d 好靚的gradient

gradient

主要分linear同 radial

但暫時仲未統一

所以個個browser 的寫法都唔同

.gradient_linear{

    /*

    *第一個是type (有linear 同radial)

    *第二個是開始的位置, x 同y, 用space 分隔

    *第三個是結束的位置, x 同y, 用space 分隔

    *第四個是開始的color, 一定要有from

    *最後一個是結束的color, 一定要有to

    *

    *第四個同最後一個中間可以加 color-stop(位置, 顏色), 咁就可以做出幾隻色的gradient

    */

   /*圖一*/

   background: -webkit-gradient(linear, left top, left bottom,

   from(yellow),

   to(blue));

   /*圖二*/

    background: -webkit-gradient(linear, left top, right bottom,

    from(red),

    color-stop(16%, orange),

    color-stop(33%, yellow),

    color-stop(49%, green),

    color-stop(66%, blue),

    color-stop(83%, indigo),

    to(violet));

}

圖一

圖二