免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
返回列表 發帖

CSS3 Gradients 漸層效果




CSS3 Gradients 漸層效果

CSS3 Gradients 是用來設計漸層效果的新功能,在傳統的網頁設計中,如果要設計出一個漸層的背景顏色或一個具有漸層色彩的區塊,需要透過圖片的設計來處理,但是到了 CSS3 的發展,這樣的傳統設計思維有所改變,CSS3 推出了一個名為 Gradients 的功能,可以設計出不同的漸層效果,僅需透過 Gradients 的調整,例如漸層方向、漸層所呈現的顏色、漸層的呈現形狀,就可以很輕易的讓瀏覽器自己產生出漸層效果,可以應用在網頁本身的背景漸層效果或是區外的漸層視覺效果,優點是不用先設計漸層圖片、減少頻寬的浪費,而且漸層放大後的效果也比傳統的圖片式漸層效果好,因為是用瀏覽器自動產生的漸層,優點自然不在話下。

  目前有兩種漸層效果,分別是線性漸層(Linear Gradients)以及徑向漸層(Radial Gradients),這兩者的設定方式不太一樣,實際的視覺效果也不一樣。



本帖最後由 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);


TOP

本帖最後由 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;


TOP

TOP

返回列表