CSS實例學習教程:用CSS3繪制網頁漸變背景

2024-07-11 09:01:50

字體：大中小

來源：轉載

供稿：網友

武林網(www.survivalescaperooms.com)文章簡介：CSS3中繪制漸變背景.

火狐瀏覽器：
-moz-linear-gradient(起始點, 其實顏色, [中間顏色百分比], 結束顏色)。
起始點：left top center bottom，可以組合。
顏色： ragba，如果是transparent則為透明。
-moz-linear-gradient(center top, transparent, transparent 49%, rgba(2,37,58,0.5) 50%, rgba(63,111,135,0.5)); 中上開始。

chrome瀏覽器：
-webkit-gradient(linear, center top, center bottom, from(transparent), color-stop(49%,transparent), color-stop(50%, rgba(2,37,58,0.5)), to(rgba(63,111,135,0.5)));

opera瀏覽器：
-o-linear-gradient(top, transparent, transparent 49%, rgba(2,37,58,0.5) 50%, rgba(63,111,135,0.5));

百分比的寫法：起點y 終點x
-webkit-gradient(linear, 0% 100%, 100% 100%, from(#517384), color-stop(50%, #79a3b8), to(#517384));
-moz-linear-gradient(center left, rgba(81,115,132,0.55), rgba(121,163,184,0.55) 50%, rgba(81,115,132,0.55));

上一篇：WEB響應式設計:響應式Web設計的CSS框架分享

下一篇：CSS3實例教程:變形屬性transform實例講解