【公告】網站目前停止所有的課程訂閱服務,原有學員權益不受影響,造成不便還請見諒,我們正在打造更多課程以及圖書,包含 Python 為主的課程主題,未來將會合併且擴充目前的課程內容,提供全新課程訂閱服務,感謝學員的支持。

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 以外的其它瀏覽器。




沒有留言: