CSS 漸層(Gradient)入門

CSS 支援漸層(Gradient)效果,來看幾個簡單的漸層效果


此方塊漸層從最上方的顏色(#400000)轉換至下方(#C00000),所需的配置如下:

background: -webkit-linear-gradient(top, #400000 , #C00000 );

其中的 top 表示從最頂層開始往下改變顏色, #400000 是開始的顏色值,#C00000 則是最下方結束的顏色值,如果將 top 改成 left ,則變成以下的樣式:


linear-gradient 是線性漸層,top 的漸層效果是由上到下,如果指定 bottom 則反向由下到上,而 left 可以改成 right ,則會由右至左。

如果將 linear-gradient 改成 radial-gradient ,而將 left/top 改成 circle ,可以得到輻射漸層如下(Opera 不支援):


要特別注意的是,其中的 -webkit-linear-gradient 或是 -webkit-radial-gradient 樣式,必須同時提供 -moz- -ms- -o- 等字首的樣式設定,以支援 Chrome 以外的其它瀏覽器。




沒有留言: