CSS3 Gradients 漸層效果 | CSS 彩虹 漸層
![CSS3 Gradients 漸層效果](https://i.imgur.com/axBPWDg.jpg)
CSS3Gradients是用來設計漸層效果的新功能,在傳統的網頁設計中,如果要設計出一個漸層的背景顏色或一個具有漸層色彩的區塊,需要透過圖片的設計來處理,但是到了CSS3的發展,這樣的傳統設計思維有所改變,CSS3推出了一個名為Gradients的功能,可以設計出不同的漸層效果,僅需透過Gradients的調整,例如漸層方向、漸層所呈現的顏色、漸層的呈現形狀,就可以很輕易的讓瀏覽器自己產生出漸層效果,可以應用在網頁本身的背景漸層效果或是區外的漸層視覺效果,優點是不用先設計漸層圖片、減少頻寬的浪費,而且漸層放大後的效果也比傳統的...
![CSS3 Gradients 漸層效果](http://pix4.agoda.net/hotelimages/4172139/0/24097f8fc1c9959ea5062e8d6497eaad.jpg?s=800x)
CSS3 Gradients 目前有兩種漸層效果,分別是線性漸層(Linear Gradients)以及徑向漸層(Radial Gradients),這兩者的設定方式不太一樣,實際的視覺效果當然也不一樣,本篇會依序提供它們的實際範例給各位讀者朋友參考。
瀏覽器對 CSS3 Gradients 的支援程度
IE 10.0 及以上的版本支援。Google Chrome 26.0 及以上的版本支援。FireFox 16.0 及以上的版本支援。Apple Safari 6.1 及以上的版本支援。Opera 12.1 及以上的版本支援。以上整理的是各家主流瀏覽器對 CSS3 Gradients 的支援程度,幾乎最新版本的瀏覽器都已經支援,不過在設計 Gradients 的時候,還是建議多找幾個瀏覽器實際測試效果,為了讓效果表現成功率更高,建議使用各種瀏覽器適用前綴,整理如下。瀏覽器適用前綴
Google Chrome 與 Apple Safari 使用 -webkit-Mozilla FireFox 使用 -moz-Opera 使用 -o-線性漸層(Linear Gradient)與徑向漸層(Radial Gradients)的語法規則線性漸層語法:background: linear-gradient(方向,顏色1,顏色2, ......);徑向漸層語法:background: radial-gradient(ellipse 或 circle,顏色1,顏色2, ......);
線性漸層的方向可以是由上而下漸層、由下而上...取得本站獨家住宿推薦 15%OFF 訂房優惠
本站住宿推薦 20%OFF 訂房優惠,親子優惠,住宿折扣,限時回饋,平日促銷
CSS 漸層-多層次漸層 | CSS 彩虹 漸層
2013年8月27日 — 你可以根據所需的顏色種類進行設定,例如以下的彩虹漸層:. 其中包含了七組顏色:red,orange,yellow,green,blue,indigo,violet,並且平均分配在 ... Read More
CSS3 Gradients 漸層效果 | CSS 彩虹 漸層
CSS3 Gradients 是用來設計漸層效果的新功能,在傳統的網頁設計中,如果要設計出 ... 顏色或一個具有漸層色彩的區塊,需要透過圖片的設計來處理,但是到了CSS. Read More
CSS3 漸層 | CSS 彩虹 漸層
... 由瀏覽器生成的。 CSS3 定義了兩種型別的漸層(gradients): 線性漸層(Linea. ... 線上執行. 下面的例項演示了如何建立一個帶有彩虹顏色和文字的線性漸層: ... Read More
CSS3漸層產生器 | CSS 彩虹 漸層
用滑鼠調整就能直觀的設定出你喜歡的樣式,並即時的顯示CSS3的語法程式碼,你只需複製並貼到CSS檔案便能使用. Read More
【靈感來源】Fresh Background Gradients | CSS 彩虹 漸層
另外,也有提供CSS語法讓大家使用呢! Free Resource 好康報報Good Design 好站報報- 【靈感來源. 如果大家對180種的漸層色都很 ... Read More
一起幫忙解決難題,拯救IT 人的一天 | CSS 彩虹 漸層
CSS:background 雙色漸層. 自我挑戰日記 ... 多色漸層:. 漸層的顏色還可以使用多色漸層,像範例的彩虹七彩顏色使用2 種顏色以上只需要用", " 分隔每個顏色, Read More
使用CSS3輕鬆寫出MAC彩虹球效果 | CSS 彩虹 漸層
2013年11月20日 — 說到MAC彩虹球(MAC Beach ball),就是MAC在忙碌時會出現的那顆彩球 ... 準備HTML原始碼並設定基本CSS定位 ... 利用CSS3 漸層製作色塊. Read More
深入理解CSS 漸層( CSS Gradient ) | CSS 彩虹 漸層
這篇文章將會針對CSS 的漸層做深入的介紹,除了常見的線性漸層、放射漸層,更會介紹最新的conic-gradient 圓錐形漸 ... 如果多一點顏色,就能做出彩虹的效果。 Read More
漸層linear | CSS 彩虹 漸層
css: .gradientBox .simple width: 130px; height: 130px; background: #000; ... Basic Sample1 : 45角漸層,藍到紅*/ background-image: linear-gradient( 45deg, blue ... 40%, #edff76 60%, #63deab 80%, #6ad7ff 100% ); } /*條狀彩虹(無漸層)*/ . Read More
訂房住宿優惠推薦
![](https://i.imgur.com/axBPWDg.jpg)