繁體
|
簡體
Sclub交友聊天~加入聊天室當版主
(檢舉)
分享
新浪微博
QQ空间
人人网
腾讯微博
Facebook
Google+
Plurk
Twitter
Line
標題:
CSS3 Gradients 漸層效果
[打印本頁]
作者:
rainbow
時間:
2020-7-18 11:27
標題:
CSS3 Gradients 漸層效果
CSS3 Gradients 漸層效果
CSS3 Gradients 是用來設計漸層效果的新功能,在傳統的網頁設計中,如果要設計出一個漸層的背景顏色或一個具有漸層色彩的區塊,需要透過圖片的設計來處理,但是到了 CSS3 的發展,這樣的傳統設計思維有所改變,CSS3 推出了一個名為 Gradients 的功能,可以設計出不同的漸層效果,僅需透過 Gradients 的調整,例如漸層方向、漸層所呈現的顏色、漸層的呈現形狀,就可以很輕易的讓瀏覽器自己產生出漸層效果,可以應用在網頁本身的背景漸層效果或是區外的漸層視覺效果,優點是不用先設計漸層圖片、減少頻寬的浪費,而且漸層放大後的效果也比傳統的圖片式漸層效果好,因為是用瀏覽器自動產生的漸層,優點自然不在話下。
目前有兩種漸層效果,分別是線性漸層(Linear Gradients)以及徑向漸層(Radial Gradients),這兩者的設定方式不太一樣,實際的視覺效果也不一樣。
作者:
rainbow
時間:
2020-7-18 11:32
本帖最後由 rainbow 於 2020-7-18 17:33 編輯
用CSS3 Gradients
制作渐变背景效果演示
由上而下的線性漸層效果
linear-gradient(red, yellow, green);
由左而右的線性漸層效果
linear-gradient(to right, red, yellow, green);
由左上向右下的線性漸層效果
linear-gradient(to bottom right, red, yellow, green);
亦可用角度調整渐变方向
linear-gradient(45deg, red, yellow, green);
由内到外圆形漸層效果
radial-gradient(circle, yellow, red);
由内到外椭圆形漸層效果
radial-gradient(ellipse, yellow, red);
作者:
rainbow
時間:
2020-7-18 13:04
本帖最後由 rainbow 於 2020-7-18 13:31 編輯
Linear Gradients
堆叠渐变效果
堆叠渐变效果范例
linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
Radial Gradients
堆叠渐变效果
堆叠渐变效果范例
radial-gradient(circle at 50% 0, rgba(255,0,0,.5), rgba(255,0,0,0) 70.71%),
radial-gradient(circle at 6.7% 75%, rgba(0,0,255,.5), rgba(0,0,255,0) 70.71%),
radial-gradient(circle at 93.3% 75%, rgba(0,255,0,.5), rgba(0,255,0,0) 70.71%) beige;
作者:
rainbow
時間:
2020-7-18 13:07
《你真的理解CSS的linear-gradient?》
歡迎光臨 老校友 (http://boanson.orzweb.net/)
Powered by Discuz! 7.2