【公告】網站目前停止所有的課程訂閱服務,原有學員權益不受影響,造成不便還請見諒,我們正在打造更多課程以及圖書,包含 Python 為主的課程主題,未來將會合併且擴充目前的課程內容,提供全新課程訂閱服務,感謝學員的支持。
【公告】《Entity Framework 實務精要》 絕版優惠學習活動,是針對最後一批少量書籍絕版的短期特別活動,只提供 20 個名額(剩 5 名),教學影片要在今年暑假過後才會重新開放訂閱,並沒有提供之前單獨購書的讀者,還請見諒, 如果您需要教學影片,屆時再請參與,也感謝讀者學員的支持,我們正在開發更多的教學內容,歡迎與我們一起努力。
《Entity Framework 實務精要》 絕版優惠學習活動》

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




沒有留言: