CSS3 Gradients 漸層效果

預設值為由上而下：

下面範例為黃色開始漸層至紅色的效果，由上而下的漸層。

#T2B{
    background: -webkit-linear-gradient(yellow,red);
    background: -o-linear-gradient(yellow,red);
    background: -moz-linear-gradient(yellow,red);
    background: linear-gradient(yellow,red);
}
        

也可以由左而右：

#L2R{
    background: -webkit-linear-gradient(left,yellow,red);
    background: -o-linear-gradient(right,yellow,red);
    background: -moz-linear-gradient(right,yellow,red);
    background: linear-gradient(to right,yellow,red);
}
        

對角線的線性表現：

#B2R{
    background: -webkit-linear-gradient(bottom right,yellow,red);
    background: -o-linear-gradient(bottom right,yellow,red);
    background: -moz-linear-gradient(bottom right,yellow,red);
    background: linear-gradient(to bottom right,yellow,red);
}
        

利用角度調整的線性漸層效果：

利用 gradients 的第一個參數並設定為 90deg，也就是轉 90 度的意思。

#DEG{
    background: -webkit-linear-gradient(90deg,yellow,red);
    background: -o-linear-gradient(90deg,yellow,red);
    background: -moz-linear-gradient(90deg,yellow,red);
    background: linear-gradient(90deg,yellow,red);
}
        

#ellipse{
    background: -webkit-radial-gradient(ellipse,yellow,red);
    background: -o-radial-gradient(ellipse,yellow,red);
    background: -moz-radial-gradient(ellipse,yellow,red);
    background: radial-gradient(ellipse,yellow,red);
}