• HTML5/CSS3 互動特效
  • import_contacts 用css也能做出漸層效果
    102
適用範圍

網頁開發人員、網站維護人員

實用性:
重要性:

CSS3 Gradients 漸層效果

CSS3 Gradients 不同以往傳統網頁需要透過圖片才能呈現出漸層的效果,
現在只要透過 Gradients 的調整,例如漸層方向、漸層呈現的顏色、漸層呈現的形狀,就可以很輕易的在瀏覽器產生漸層效果。

漸層方式又分 線性漸層(Linear Gradient)徑向漸層(Radial 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);
}
        

info 有一點需要特別注意的是,Google Chrome 與 Apple Safari 使用的前綴 -webkit- 第一個方向參數為"從哪個方向開始"的概念,其它的瀏覽器則是用"向哪個方向漸層"的概念。

徑向漸層

徑向漸層又分 橢圓形(ellipse)圓形(circle) 漸層效果,
預設值為橢圓形,如下面範例,第一個參數改circle則為圓形漸層效果。

 

#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);
}